detailsaccordionbeginner

Styled Accordion

A collapsible accordion with a rotating chevron indicator using the details/summary elements.

Preview
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces without writing custom CSS.
Is Tailwind CSS free?
Yes, Tailwind CSS is open-source and free to use in personal and commercial projects under the MIT license.
Can I customize the colors?
Absolutely. Tailwind's configuration file lets you define custom colors, spacing, fonts, and more to match your brand.
<div class="max-w-lg mx-auto space-y-2">
  <details class="group bg-white border border-gray-200 rounded-lg" open>
    <summary class="flex items-center justify-between px-5 py-4 cursor-pointer text-sm font-medium text-gray-900 list-none">
      What is Tailwind CSS?
      <svg class="w-5 h-5 text-gray-400 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
    </summary>
    <div class="px-5 pb-4 text-sm text-gray-600">Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces without writing custom CSS.</div>
  </details>
  <details class="group bg-white border border-gray-200 rounded-lg">
    <summary class="flex items-center justify-between px-5 py-4 cursor-pointer text-sm font-medium text-gray-900 list-none">
      Is Tailwind CSS free?
      <svg class="w-5 h-5 text-gray-400 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
    </summary>
    <div class="px-5 pb-4 text-sm text-gray-600">Yes, Tailwind CSS is open-source and free to use in personal and commercial projects under the MIT license.</div>
  </details>
  <details class="group bg-white border border-gray-200 rounded-lg">
    <summary class="flex items-center justify-between px-5 py-4 cursor-pointer text-sm font-medium text-gray-900 list-none">
      Can I customize the colors?
      <svg class="w-5 h-5 text-gray-400 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
    </summary>
    <div class="px-5 pb-4 text-sm text-gray-600">Absolutely. Tailwind's configuration file lets you define custom colors, spacing, fonts, and more to match your brand.</div>
  </details>
</div>

Color Breakdown

Background

bg-white

#ffffff

Border

border-gray-200

#e5e7eb

Question Text

text-gray-900

#111827

Chevron

text-gray-400

#9ca3af

Answer Text

text-gray-600

#4b5563

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:text-gray-400

Use Cases

FAQ sectionsSettings panelsDocumentation sidebars

Browser Support

All modern browsers. The <details> element is supported in all evergreen browsers.

Related Recipes

Toggle Button

button - intermediate

Toggle Switch

input - intermediate

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

Can I have only one accordion open at a time?▼
The native details element does not support exclusive mode. Use JavaScript to close other details elements when one is opened, or use the name attribute in browsers that support it.