Tailwind CSS accordions

Default Accordion

This collapsible component let's your users read only the content they care about. 😌

Preview

Accordion Item 1

This is the content of the first accordion item. It is styled with Tailwind CSS.

Accordion Item 2

This is the content of the second accordion item. It has a similar style to maintain consistency.

Accordion Item 3

This is the content of the third accordion item. The details element handles the toggle behavior.

Code

<div class="space-y-4 mx-auto p-4">
  <!-- Accordion Item 1 -->
  <details class="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
    <summary class="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
      Accordion Item 1
    </summary>
    <div class="px-4 py-2 font-body bg-white text-gray-700">
      This is the content of the first accordion item. It is styled with Tailwind CSS.
    </div>
  </details>

  <!-- Accordion Item 2 -->
  <details class="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
    <summary class="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
      Accordion Item 2
    </summary>
    <div class="px-4 py-2 font-body bg-white text-gray-700">
      This is the content of the second accordion item. It has a similar style to maintain consistency.
    </div>
  </details>

  <!-- Accordion Item 3 -->
  <details class="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
    <summary class="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
      Accordion Item 3
    </summary>
    <div class="px-4 py-2 font-body bg-white text-gray-700">
      This is the content of the third accordion item. The details element handles the toggle behavior.
    </div>
  </details>
</div>