Accordion

Example

              
<!-- Accordion -->
<div data-type='accordion-container' id="accordione">
  <!-- list -->
  <div class="relative flex flex-wrap flex-col shadow mb-4 bg-white dark:bg-gray-800">
    <button class="active py-3 px-4 w-full border-b border-gray-100 mb-0 bg-surface-200 dark:bg-surfacedark-200 dark:border-gray-700 rounded-t text-title-md flex justify-between focus:outline-none focus:ring-0 text-left" data-type="collapse" data-target="#accordion1">
      How to make an accordion with Tailwind?
    </button>
    <div id="accordion1" data-type="collapsed" class="active [&.active]:block hidden">
      <div class="flex-1 p-6 text-body-lg text-gray-600 dark:text-gray-400">
        <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
      </div>
    </div>
  </div>

  <!-- list -->
  <div class="relative flex flex-wrap flex-col shadow mb-4 bg-white dark:bg-gray-800">
    <button class="py-3 px-4 w-full border-b border-gray-100 mb-0 bg-surface-200 dark:bg-surfacedark-200 dark:border-gray-700 rounded-t text-title-md flex justify-between focus:outline-none focus:ring-0 text-left" data-type="collapse" data-target="#accordion2">
      How do you open an Material accordion?
    </button>
    <div id="accordion2" data-type="collapsed" class="[&.active]:block hidden">
      <div class="flex-1 p-6 text-body-lg text-gray-600 dark:text-gray-400">
        <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
      </div>
    </div>
  </div>
</div>