Faq Components in Metis library

<section class="section is-background-contain is-background-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container">
    <div class="has-text-centered mb-6">
      <img class="is-fullwidth is-max-w-sm mb-5" src="metis-assets/illustrations/hardworking-man.png" alt="">
      <form action="#">
        <div class="is-max-w-2xl mx-auto">
          <div class="field has-addons">
            <div class="control is-expanded">
              <input class="input" placeholder="Search, find any question you want to ask...">
            </div>
            <div class="control">
              <button class="button is-primary">
                <svg class="image is-16x16" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="columns is-multiline mb-6">
      <div class="column is-3-widescreen is-6-desktop is-12-touch">
        <div class="card card-content content has-background-white">
          <h4 class="title is-size-5 is-spaced mb-3">Category 1</h4>
          <ul class="subtitle is-size-7">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Maecenas efficitur pharetra urna, eget ullamcorper neque gravida quis</li>
            <li>Sed lorem ante</li>
            <li>Ullamcorper neque gravida quis</li>
          </ul>
        </div>
      </div>
      <div class="column is-3-widescreen is-6-desktop is-12-touch">
        <div class="card card-content content has-background-white">
          <h4 class="title is-size-5 is-spaced mb-3">Category 2</h4>
          <ul class="subtitle is-size-7">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Maecenas efficitur pharetra urna, eget ullamcorper neque gravida quis</li>
            <li>Sed lorem ante</li>
            <li>Ullamcorper neque gravida quis</li>
          </ul>
        </div>
      </div>
      <div class="column is-3-widescreen is-6-desktop is-12-touch">
        <div class="card card-content content has-background-white">
          <h4 class="title is-size-5 is-spaced mb-3">Category 3</h4>
          <ul class="subtitle is-size-7">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Maecenas efficitur pharetra urna, eget ullamcorper neque gravida quis</li>
            <li>Sed lorem ante</li>
            <li>Ullamcorper neque gravida quis</li>
          </ul>
        </div>
      </div>
      <div class="column is-3-widescreen is-6-desktop is-12-touch">
        <div class="card card-content content has-background-white">
          <h4 class="title is-size-5 is-spaced mb-3">Category 4</h4>
          <ul class="subtitle is-size-7">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Maecenas efficitur pharetra urna, eget ullamcorper neque gravida quis</li>
            <li>Sed lorem ante</li>
            <li>Ullamcorper neque gravida quis</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="is-max-w-3xl mx-auto">
      <ul>
        <li class="mb-3">
          <button class="button is-dark is-outlined is-fullwidth is-flex is-justify-content-space-between">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
            <svg class="image is-16x16" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </button>
          <p class="is-hidden subtitle my-5 px-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
        </li>
        <li class="mb-3">
          <button class="button is-dark is-outlined is-fullwidth is-flex is-justify-content-space-between">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
            <svg class="image is-16x16" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
          </button>
          <p class="subtitle my-5 px-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
        </li>
        <li class="mb-3">
          <button class="button is-dark is-outlined is-fullwidth is-flex is-justify-content-space-between">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
            <svg class="image is-16x16" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </button>
          <p class="is-hidden subtitle my-5 px-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
        </li>
        <li class="mb-3">
          <button class="button is-dark is-outlined is-fullwidth is-flex is-justify-content-space-between">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
            <svg class="image is-16x16" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </button>
          <p class="is-hidden subtitle my-5 px-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
        </li>
      </ul>
    </div>
  </div>
</section>

<section class="py-5" style="background-size: contain; background-position: top; background-repeat: no-repeat; background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container">
    <div class="row mb-4">
      <div class="col-5 mx-auto">
        <img class="img-fluid" src="metis-assets/illustrations/hardworking-man.png" alt="">
      </div>
    </div>
    <div class="row mb-5">
      <div class="col-12 col-md-8 col-lg-6 mx-auto">
        <form action="#">
          <div class="input-group">
            <input class="form-control" placeholder="Search, find any question you want to ask...">
            <button class="btn btn-outline-primary">
              <svg width="24" height="24" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
              </svg>
            </button>
          </div>
        </form>
      </div>
    </div>
    <div class="row mb-5">
      <div class="col-12 col-md-6 col-lg-3 mb-4">
        <div class="p-4 bg-white rounded shadow-sm">
          <h5 class="mb-3">Category 1</h5>
          <ul>
            <li class="mb-2 small text-muted">Lorem ipsum dolor sit amet</li>
            <li class="mb-2 small text-muted">Maecenas efficitur pharetra urna, eget ullamcorper neque gravida quis</li>
            <li class="mb-2 small text-muted">Sed lorem ante</li>
            <li class="small text-muted">Ullamcorper neque gravida quis</li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-4">
        <div class="p-4 bg-white rounded shadow-sm">
          <h5 class="mb-3">Category 2</h5>
          <ul>
            <li class="mb-2 small text-muted">Lorem ipsum dolor sit amet</li>
            <li class="mb-2 small text-muted">Maecenas efficitur pharetra urna, eget ullamcorper neque gravida quis</li>
            <li class="mb-2 small text-muted">Sed lorem ante</li>
            <li class="small text-muted">Ullamcorper neque gravida quis</li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-4">
        <div class="p-4 bg-white rounded shadow-sm">
          <h5 class="mb-3">Category 3</h5>
          <ul>
            <li class="mb-2 small text-muted">Lorem ipsum dolor sit amet</li>
            <li class="mb-2 small text-muted">Maecenas efficitur pharetra urna, eget ullamcorper neque gravida quis</li>
            <li class="mb-2 small text-muted">Sed lorem ante</li>
            <li class="small text-muted">Ullamcorper neque gravida quis</li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-4">
        <div class="p-4 bg-white rounded shadow-sm">
          <h5 class="mb-3">Category 4</h5>
          <ul>
            <li class="mb-2 small text-muted">Lorem ipsum dolor sit amet</li>
            <li class="mb-2 small text-muted">Maecenas efficitur pharetra urna, eget ullamcorper neque gravida quis</li>
            <li class="mb-2 small text-muted">Sed lorem ante</li>
            <li class="small text-muted">Ullamcorper neque gravida quis</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-8 mx-auto">
        <ul class="list-unstyled accordion" id="accordion01">
          <li class="accordion-item">
            <h3 class="accordion-header">
              <button class="accordion-button collapsed bg-transparent text-left" type="button" data-toggle="collapse" data-target="#collapseOne01" aria-expanded="false" aria-controls="collapseOne01">
                <span class="fw-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
              </button>
            </h3>
            <div class="accordion-collapse collapse" id="collapseOne01" aria-labelledby="headingOne" data-parent="#accordion01">
              <div class="accordion-body">
                <p class="text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item">
            <h3 class="accordion-header fw-bold">
              <button class="accordion-button bg-transparent text-left" type="button" data-toggle="collapse" data-target="#collapseTwo01" aria-expanded="true" aria-controls="collapseTwo01">
                <span class="fw-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
              </button>
            </h3>
            <div class="accordion-collapse collapse show" id="collapseTwo01" aria-labelledby="headingTwo" data-parent="#accordion01">
              <div class="accordion-body">
                <p class="text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item">
            <h3 class="accordion-header fw-bold">
              <button class="accordion-button collapsed bg-transparent text-left" type="button" data-toggle="collapse" data-target="#collapseThree01" aria-expanded="false" aria-controls="collapseThree01">
                <span class="fw-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
              </button>
            </h3>
            <div class="accordion-collapse collapse" id="collapseThree01" aria-labelledby="headingThree" data-parent="#accordion01">
              <div class="accordion-body">
                <p class="text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item">
            <h3 class="accordion-header fw-bold">
              <button class="accordion-button collapsed bg-transparent text-left" type="button" data-toggle="collapse" data-target="#collapseFour01" aria-expanded="false" aria-controls="collapseFour01">
                <span class="fw-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
              </button>
            </h3>
            <div class="accordion-collapse collapse" id="collapseFour01" aria-labelledby="headingFour" data-parent="#accordion01">
              <div class="accordion-body">
                <p class="text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

<section class="pt-12 pb-20 lg:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container px-4 mx-auto">
    <img class="mx-auto sm:max-w-sm mb-10" src="metis-assets/illustrations/hardworking-man.png" alt="">
    <form class="flex justify-center max-w-3xl mx-auto mb-16">
      <input class="w-2/3 p-4 text-xs placeholder-blueGray-800 font-bold font-heading bg-white focus:border-gray-500 focus:outline-none rounded-l" placeholder="Search, find any question you want to ask...">
      <button class="pr-4 rounded-r bg-white text-blue-600">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </button>
    </form>
    <div class="flex flex-wrap justify-between -mx-3 mb-12">
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="p-6 bg-white rounded shadow">
          <h4 class="mb-3 font-bold font-heading">Category 1</h4>
          <ul class="list-disc list-inside text-xs text-blueGray-400">
            <li class="mb-2">Lorem ipsum dolor sit amet</li>
            <li class="mb-2">Maecenas efficitur pharetra urna, eget ullamcorper neque gravida quis</li>
            <li class="mb-2">Sed lorem ante</li>
            <li>Ullamcorper neque gravida quis</li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="p-6 bg-white rounded shadow">
          <h4 class="mb-3 font-bold font-heading">Category 2</h4>
          <ul class="list-disc list-inside text-xs text-blueGray-400">
            <li class="mb-2">Lorem ipsum dolor sit amet</li>
            <li class="mb-2">Maecenas efficitur pharetra urna, eget ullamcorper neque gravida quis</li>
            <li class="mb-2">Sed lorem ante</li>
            <li>Ullamcorper neque gravida quis</li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="p-6 bg-white rounded shadow">
          <h4 class="mb-3 font-bold font-heading">Category 3</h4>
          <ul class="list-disc list-inside text-xs text-blueGray-400">
            <li class="mb-2">Lorem ipsum dolor sit amet</li>
            <li class="mb-2">Maecenas efficitur pharetra urna, eget ullamcorper neque gravida quis</li>
            <li class="mb-2">Sed lorem ante</li>
            <li>Ullamcorper neque gravida quis</li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="p-6 bg-white rounded shadow">
          <h4 class="mb-3 font-bold font-heading">Category 4</h4>
          <ul class="list-disc list-inside text-xs text-blueGray-400">
            <li class="mb-2">Lorem ipsum dolor sit amet</li>
            <li class="mb-2">Maecenas efficitur pharetra urna, eget ullamcorper neque gravida quis</li>
            <li class="mb-2">Sed lorem ante</li>
            <li>Ullamcorper neque gravida quis</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="max-w-4xl mx-auto">
      <ul class="space-y-8">
        <li x-data="{ accordion: false }">
          <button class="w-full flex justify-between items-center text-left font-bold font-heading" x-on:click="accordion = !accordion" :class="{ 'text-blue-600 hover:text-blue-700': accordion, 'hover:text-blueGray-700': !accordion }">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
            <span :class="{'rotate-90 text-blueGray-500': accordion, 'rotate-0 text-blueGray-300': !accordion }" class="inline-block transform">
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </span>
          </button>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <p class="mt-2 text-blueGray-400 font-normal leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
          </div>
        </li>
        <li x-data="{ accordion: false }">
        <button class="w-full flex justify-between items-center text-left font-bold font-heading" x-on:click="accordion = !accordion" :class="{ 'text-blue-600 hover:text-blue-700': accordion, 'hover:text-blueGray-700': !accordion }">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
            <span :class="{'rotate-90 text-blueGray-500': accordion, 'rotate-0 text-blueGray-300': !accordion }" class="inline-block transform">
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </span>
          </button>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <p class="mt-2 text-blueGray-400 font-normal leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
          </div>
        </li>
        <li x-data="{ accordion: false }">
            <button class="w-full flex justify-between items-center text-left font-bold font-heading" x-on:click="accordion = !accordion" :class="{ 'text-blue-600 hover:text-blue-700': accordion, 'hover:text-blueGray-700': !accordion }">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
                <span :class="{'rotate-90 text-blueGray-500': accordion, 'rotate-0 text-blueGray-300': !accordion }" class="inline-block transform">
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </span>
              </button>
              <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                  <p class="mt-2 text-blueGray-400 font-normal leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
              </div>
        </li>
        <li x-data="{ accordion: false }">
            <button class="w-full flex justify-between items-center text-left font-bold font-heading" x-on:click="accordion = !accordion" :class="{ 'text-blue-600 hover:text-blue-700': accordion, 'hover:text-blueGray-700': !accordion }">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
                <span :class="{'rotate-90 text-blueGray-500': accordion, 'rotate-0 text-blueGray-300': !accordion }" class="inline-block transform">
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </span>
            </button>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="mt-2 text-blueGray-400 font-normal leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
            </div>
        </li>
      </ul>
    </div>
  </div>
</section>