Tailwind Faq Components in Bendis library

<section class="py-24 bg-blue-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto text-center mb-8">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">New feature</span>
      <h2 class="mt-4 mb-6 text-4xl font-bold font-heading text-blue-800">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="max-w-max mb-6 md:mb-14 mx-auto text-center flex flex-wrap justify-around flex-row">
      <button class="inline-block w-full md:w-auto mb-2 md:mb-0 py-2 px-8 bg-blue-800 leading-8 text-white font-semibold">Active demo</button>
      <button class="inline-block w-full md:w-auto mb-2 md:mb-0 py-2 px-8 bg-blue-100 hover:bg-blue-200 leading-8 text-blue-800 font-medium">Normal Tab</button>
      <button class="inline-block w-full md:w-auto mb-2 md:mb-0 py-2 px-8 bg-blue-100 hover:bg-blue-200 leading-8 text-blue-800 font-medium">Normal Tab</button>
      <button class="inline-block w-full md:w-auto py-2 px-8 bg-blue-100 hover:bg-blue-200 leading-8 text-blue-800 font-medium">Normal Tab</button>
    </div>
    <div class="max-w-3xl mx-auto">
      <ul>
        <li class="px-10 py-8 bg-white">
          <button class="w-full flex justify-between items-center text-left font-heading text-blue-800 hover:text-blue-700">
            <span class="text-base font-heading">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
            <svg class="flex-shrink-0 text-blue-500 w-4 h-4" viewbox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 3.25L13.5 0.75L7.99997 6.25L2.49997 0.749999L-3.01679e-05 3.25L7.99997 11.25L16 3.25Z"></path>
            </svg>
          </button>
          <p class="hidden mt-4 pr-8 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
        </li>
        <li class="px-10 py-8 bg-blue-100">
          <button class="w-full flex justify-between items-center text-left font-heading text-blue-500">
            <span class="text-lg font-semibold font-heading">Donec sed leo sit amet ante ornare laoreet in quis est?</span>
            <svg class="flex-shrink-0 text-blue-800 w-4 h-4" viewbox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.04222e-05 8.75L2.50003 11.25L8.00003 5.75L13.5 11.25L16 8.75L8.00003 0.75L3.04222e-05 8.75Z"></path>
            </svg>
          </button>
          <p class="mt-4 pr-8 text-base text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
        </li>
        <li class="px-10 py-8 bg-white border-b border-blue-100">
          <button class="w-full flex justify-between items-center text-left font-heading text-blue-800 hover:text-blue-700">
            <span class="text-base font-heading">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
            <svg class="flex-shrink-0 text-blue-500 w-4 h-4" viewbox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 3.25L13.5 0.75L7.99997 6.25L2.49997 0.749999L-3.01679e-05 3.25L7.99997 11.25L16 3.25Z"></path>
            </svg>
          </button>
          <p class="hidden mt-4 pr-8 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
        </li>
        <li class="px-10 py-8 bg-white border-b border-blue-100">
          <button class="w-full flex justify-between items-center text-left font-heading text-blue-800 hover:text-blue-700">
            <span class="text-base font-heading">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
            <svg class="flex-shrink-0 text-blue-500 w-4 h-4" viewbox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 3.25L13.5 0.75L7.99997 6.25L2.49997 0.749999L-3.01679e-05 3.25L7.99997 11.25L16 3.25Z"></path>
            </svg>
          </button>
          <p class="hidden mt-4 pr-8 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
        </li>
        <li class="px-10 py-8 bg-white">
          <button class="w-full flex justify-between items-center text-left font-heading text-blue-800 hover:text-blue-700">
            <span class="text-base font-heading">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
            <svg class="flex-shrink-0 text-blue-500 w-4 h-4" viewbox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 3.25L13.5 0.75L7.99997 6.25L2.49997 0.749999L-3.01679e-05 3.25L7.99997 11.25L16 3.25Z"></path>
            </svg>
          </button>
          <p class="hidden mt-4 pr-8 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
        </li>
      </ul>
    </div>
  </div>
</section>