22 Tailwind Dropdown Menus
09 / 22

All 22 in 22 Tailwind Dropdown Menus

  1. 01Tailwind Slide-Down Fade Dropdown Menu
  2. 02Tailwind Clip-Path Curtain Reveal Dropdown
  3. 03Tailwind 3D Perspective Flip Dropdown
  4. 04Tailwind Elastic Bounce Dropdown Menu
  5. 05Tailwind Glassmorphism Float Panel Dropdown
  6. 06Tailwind Stagger Children Reveal Dropdown
  7. 07Tailwind Mega Menu Grid Dropdown
  8. 08Tailwind Underline Nav Fade Panel Dropdown
  9. 09Tailwind Details Summary Native Dropdown
  10. 10Tailwind Checkbox Hack Mobile Nav Dropdown
  11. 11Tailwind Nested Multi-Level Dropdown
  12. 12Tailwind Icon Sidebar Flyout Dropdown
  13. 13Tailwind Split-Screen Mega Menu Dropdown
  14. 14Tailwind Segmented Pill Nav Dropdown
  15. 15Tailwind Color Swatch Picker Dropdown
  16. 16Tailwind Right-Click Context Menu Dropdown
  17. 17Tailwind Keyboard Accessible ARIA Dropdown
  18. 18Tailwind Stagger Blur Entrance Dropdown
  19. 19Tailwind Command Palette Search Dropdown
  20. 20Tailwind Autocomplete Suggestion Dropdown
  21. 21Tailwind Tab Panel Dropdown
  22. 22Tailwind Custom Animated Select Dropdown
Pure TailwindMIT licensed

Tailwind Details Summary Native Dropdown

The dropdown the browser already ships. <details> toggles itself, is keyboard operable for free, and v4 reads its state with the open: variant — so a click-to-open menu with zero JavaScript is four utilities and a marker reset.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tdd-09 w-full min-h-svh grid place-items-center bg-linear-[160deg,var(--color-tdd09-bg1),var(--color-tdd09-bg2)] font-tdd09-sans text-tdd09-ink px-5 py-10" aria-label="Details summary native dropdown demo">
  <div class="flex w-[min(640px,100%)] flex-col items-center gap-4">
    <nav class="flex w-full justify-center gap-3 rounded-xl border border-tdd09-edge bg-white p-2.5 shadow-[0_4px_16px_oklch(0_0_0/0.06)]" aria-label="Primary">
      <details class="group/d relative max-w-45 flex-1">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 rounded-lg px-3.5 py-2.5 text-sm font-semibold text-tdd09-ink select-none transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd09-acc open:bg-tdd09-tint open:text-tdd09-acc [&::-webkit-details-marker]:hidden">
          <span class="font-tdd09-serif text-[15px]">Discover</span>
          <span class="relative block size-4 shrink-0 overflow-hidden before:absolute before:top-1/2 before:left-[3px] before:h-[1.5px] before:w-[7px] before:-translate-y-1/2 before:rotate-45 before:bg-current before:transition-transform before:duration-200 before:content-[''] after:absolute after:top-1/2 after:right-[3px] after:h-[1.5px] after:w-[7px] after:-translate-y-1/2 after:-rotate-45 after:bg-current after:transition-transform after:duration-200 after:content-[''] group-open/d:before:-rotate-45 group-open/d:after:rotate-45" aria-hidden="true"></span>
        </summary>
        <div class="absolute top-[calc(100%+8px)] left-0 z-10 flex max-h-0 w-full min-w-40 flex-col gap-0.5 overflow-hidden rounded-[10px] border border-tdd09-edge bg-white p-1.5 opacity-0 shadow-[0_8px_24px_oklch(0_0_0/0.1)] transition-[max-height,opacity] duration-340 [[open]>&]:max-h-100 [[open]>&]:opacity-100 motion-reduce:transition-none">
          <a href="#destinations" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Destinations</a>
          <a href="#experiences" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Experiences</a>
          <a href="#collections" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Collections</a>
          <a href="#guides" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Guides</a>
        </div>
      </details>
      <details class="group/d relative max-w-45 flex-1">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 rounded-lg px-3.5 py-2.5 text-sm font-semibold text-tdd09-ink select-none transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd09-acc open:bg-tdd09-tint open:text-tdd09-acc [&::-webkit-details-marker]:hidden">
          <span class="font-tdd09-serif text-[15px]">Plan</span>
          <span class="relative block size-4 shrink-0 overflow-hidden before:absolute before:top-1/2 before:left-[3px] before:h-[1.5px] before:w-[7px] before:-translate-y-1/2 before:rotate-45 before:bg-current before:transition-transform before:duration-200 before:content-[''] after:absolute after:top-1/2 after:right-[3px] after:h-[1.5px] after:w-[7px] after:-translate-y-1/2 after:-rotate-45 after:bg-current after:transition-transform after:duration-200 after:content-[''] group-open/d:before:-rotate-45 group-open/d:after:rotate-45" aria-hidden="true"></span>
        </summary>
        <div class="absolute top-[calc(100%+8px)] left-0 z-10 flex max-h-0 w-full min-w-40 flex-col gap-0.5 overflow-hidden rounded-[10px] border border-tdd09-edge bg-white p-1.5 opacity-0 shadow-[0_8px_24px_oklch(0_0_0/0.1)] transition-[max-height,opacity] duration-340 [[open]>&]:max-h-100 [[open]>&]:opacity-100 motion-reduce:transition-none">
          <a href="#trip-builder" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Trip Builder</a>
          <a href="#booking" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Booking</a>
          <a href="#itineraries" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Itineraries</a>
        </div>
      </details>
      <details class="group/d relative max-w-45 flex-1">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 rounded-lg px-3.5 py-2.5 text-sm font-semibold text-tdd09-ink select-none transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd09-acc open:bg-tdd09-tint open:text-tdd09-acc [&::-webkit-details-marker]:hidden">
          <span class="font-tdd09-serif text-[15px]">Journal</span>
          <span class="relative block size-4 shrink-0 overflow-hidden before:absolute before:top-1/2 before:left-[3px] before:h-[1.5px] before:w-[7px] before:-translate-y-1/2 before:rotate-45 before:bg-current before:transition-transform before:duration-200 before:content-[''] after:absolute after:top-1/2 after:right-[3px] after:h-[1.5px] after:w-[7px] after:-translate-y-1/2 after:-rotate-45 after:bg-current after:transition-transform after:duration-200 after:content-[''] group-open/d:before:-rotate-45 group-open/d:after:rotate-45" aria-hidden="true"></span>
        </summary>
        <div class="absolute top-[calc(100%+8px)] left-0 z-10 flex max-h-0 w-full min-w-40 flex-col gap-0.5 overflow-hidden rounded-[10px] border border-tdd09-edge bg-white p-1.5 opacity-0 shadow-[0_8px_24px_oklch(0_0_0/0.1)] transition-[max-height,opacity] duration-340 [[open]>&]:max-h-100 [[open]>&]:opacity-100 motion-reduce:transition-none">
          <a href="#stories" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Stories</a>
          <a href="#photography" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Photography</a>
          <a href="#reviews" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Reviews</a>
        </div>
      </details>
    </nav>
    <p class="text-xs italic text-tdd09-mut">Click any nav item to toggle &mdash; no JavaScript on this one</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tdd09-bg1: #fffbeb;
  --color-tdd09-bg1: oklch(0.98 0.02 95);
  --color-tdd09-bg2: #fef3c7;
  --color-tdd09-bg2: oklch(0.95 0.06 92);
  --color-tdd09-ink: #1c1917;
  --color-tdd09-ink: oklch(0.22 0.01 60);
  --color-tdd09-mut: #78716c;
  --color-tdd09-mut: oklch(0.56 0.01 60);
  --color-tdd09-edge: #e7e5e4;
  --color-tdd09-edge: oklch(0.91 0.005 60);
  --color-tdd09-tint: #fef3c7;
  --color-tdd09-tint: oklch(0.95 0.06 92);
  --color-tdd09-acc: #b45309;
  --color-tdd09-acc: oklch(0.53 0.14 55);
  --font-tdd09-sans: 'Source Sans 3', system-ui, sans-serif;
  --font-tdd09-serif: 'Lora', Georgia, serif;
}

.tdd-09 {
  width: 100%;
  min-height: 100svh;
}

.tdd-09 ::selection {
  background: var(--color-tdd09-acc);
  color: #fffbeb;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tdd09-bg1: #fffbeb;
  --color-tdd09-bg1: oklch(0.98 0.02 95);
  --color-tdd09-bg2: #fef3c7;
  --color-tdd09-bg2: oklch(0.95 0.06 92);
  --color-tdd09-ink: #1c1917;
  --color-tdd09-ink: oklch(0.22 0.01 60);
  --color-tdd09-mut: #78716c;
  --color-tdd09-mut: oklch(0.56 0.01 60);
  --color-tdd09-edge: #e7e5e4;
  --color-tdd09-edge: oklch(0.91 0.005 60);
  --color-tdd09-tint: #fef3c7;
  --color-tdd09-tint: oklch(0.95 0.06 92);
  --color-tdd09-acc: #b45309;
  --color-tdd09-acc: oklch(0.53 0.14 55);
  --font-tdd09-sans: 'Source Sans 3', system-ui, sans-serif;
  --font-tdd09-serif: 'Lora', Georgia, serif;
}

.tdd-09 {
  width: 100%;
  min-height: 100svh;
}

.tdd-09 ::selection {
  background: var(--color-tdd09-acc);
  color: #fffbeb;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • open: is the shortest state variant in the collection, and the only one where the browser owns the state machine end to end.
  • Descendants use [[open]>&]: rather than group-open: on purpose: the direct-child form is the only one that survives nesting.
  • The chevron is drawn with before:/after: utilities, so the entire icon is markup — the CSS version needed six rules for the same two bars.
  • min-h-11 is doing accessibility work, not layout work: it is the 44px hit-target floor expressed in the spacing scale.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Details Summary Native Dropdown
Source: https://codefronts.com/navigation/tailwind-dropdown-menus/tailwind-details-summary-native-dropdown/

The dropdown the browser already ships. <details> toggles itself, is keyboard operable for free, and v4 reads its state with the open: variant — so a click-to-open menu with zero JavaScript is four utilities and a marker reset.
## HTML
```html
<section class="tdd-09 w-full min-h-svh grid place-items-center bg-linear-[160deg,var(--color-tdd09-bg1),var(--color-tdd09-bg2)] font-tdd09-sans text-tdd09-ink px-5 py-10" aria-label="Details summary native dropdown demo">
  <div class="flex w-[min(640px,100%)] flex-col items-center gap-4">
    <nav class="flex w-full justify-center gap-3 rounded-xl border border-tdd09-edge bg-white p-2.5 shadow-[0_4px_16px_oklch(0_0_0/0.06)]" aria-label="Primary">
      <details class="group/d relative max-w-45 flex-1">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 rounded-lg px-3.5 py-2.5 text-sm font-semibold text-tdd09-ink select-none transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd09-acc open:bg-tdd09-tint open:text-tdd09-acc [&::-webkit-details-marker]:hidden">
          <span class="font-tdd09-serif text-[15px]">Discover</span>
          <span class="relative block size-4 shrink-0 overflow-hidden before:absolute before:top-1/2 before:left-[3px] before:h-[1.5px] before:w-[7px] before:-translate-y-1/2 before:rotate-45 before:bg-current before:transition-transform before:duration-200 before:content-[''] after:absolute after:top-1/2 after:right-[3px] after:h-[1.5px] after:w-[7px] after:-translate-y-1/2 after:-rotate-45 after:bg-current after:transition-transform after:duration-200 after:content-[''] group-open/d:before:-rotate-45 group-open/d:after:rotate-45" aria-hidden="true"></span>
        </summary>
        <div class="absolute top-[calc(100%+8px)] left-0 z-10 flex max-h-0 w-full min-w-40 flex-col gap-0.5 overflow-hidden rounded-[10px] border border-tdd09-edge bg-white p-1.5 opacity-0 shadow-[0_8px_24px_oklch(0_0_0/0.1)] transition-[max-height,opacity] duration-340 [[open]>&]:max-h-100 [[open]>&]:opacity-100 motion-reduce:transition-none">
          <a href="#destinations" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Destinations</a>
          <a href="#experiences" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Experiences</a>
          <a href="#collections" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Collections</a>
          <a href="#guides" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Guides</a>
        </div>
      </details>
      <details class="group/d relative max-w-45 flex-1">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 rounded-lg px-3.5 py-2.5 text-sm font-semibold text-tdd09-ink select-none transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd09-acc open:bg-tdd09-tint open:text-tdd09-acc [&::-webkit-details-marker]:hidden">
          <span class="font-tdd09-serif text-[15px]">Plan</span>
          <span class="relative block size-4 shrink-0 overflow-hidden before:absolute before:top-1/2 before:left-[3px] before:h-[1.5px] before:w-[7px] before:-translate-y-1/2 before:rotate-45 before:bg-current before:transition-transform before:duration-200 before:content-[''] after:absolute after:top-1/2 after:right-[3px] after:h-[1.5px] after:w-[7px] after:-translate-y-1/2 after:-rotate-45 after:bg-current after:transition-transform after:duration-200 after:content-[''] group-open/d:before:-rotate-45 group-open/d:after:rotate-45" aria-hidden="true"></span>
        </summary>
        <div class="absolute top-[calc(100%+8px)] left-0 z-10 flex max-h-0 w-full min-w-40 flex-col gap-0.5 overflow-hidden rounded-[10px] border border-tdd09-edge bg-white p-1.5 opacity-0 shadow-[0_8px_24px_oklch(0_0_0/0.1)] transition-[max-height,opacity] duration-340 [[open]>&]:max-h-100 [[open]>&]:opacity-100 motion-reduce:transition-none">
          <a href="#trip-builder" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Trip Builder</a>
          <a href="#booking" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Booking</a>
          <a href="#itineraries" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Itineraries</a>
        </div>
      </details>
      <details class="group/d relative max-w-45 flex-1">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 rounded-lg px-3.5 py-2.5 text-sm font-semibold text-tdd09-ink select-none transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd09-acc open:bg-tdd09-tint open:text-tdd09-acc [&::-webkit-details-marker]:hidden">
          <span class="font-tdd09-serif text-[15px]">Journal</span>
          <span class="relative block size-4 shrink-0 overflow-hidden before:absolute before:top-1/2 before:left-[3px] before:h-[1.5px] before:w-[7px] before:-translate-y-1/2 before:rotate-45 before:bg-current before:transition-transform before:duration-200 before:content-[''] after:absolute after:top-1/2 after:right-[3px] after:h-[1.5px] after:w-[7px] after:-translate-y-1/2 after:-rotate-45 after:bg-current after:transition-transform after:duration-200 after:content-[''] group-open/d:before:-rotate-45 group-open/d:after:rotate-45" aria-hidden="true"></span>
        </summary>
        <div class="absolute top-[calc(100%+8px)] left-0 z-10 flex max-h-0 w-full min-w-40 flex-col gap-0.5 overflow-hidden rounded-[10px] border border-tdd09-edge bg-white p-1.5 opacity-0 shadow-[0_8px_24px_oklch(0_0_0/0.1)] transition-[max-height,opacity] duration-340 [[open]>&]:max-h-100 [[open]>&]:opacity-100 motion-reduce:transition-none">
          <a href="#stories" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Stories</a>
          <a href="#photography" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Photography</a>
          <a href="#reviews" class="block rounded-[7px] px-3 py-2.5 font-tdd09-serif text-[13.5px] font-medium text-tdd09-ink no-underline transition-colors duration-150 hover:bg-tdd09-tint hover:text-tdd09-acc focus-visible:bg-tdd09-tint focus-visible:outline-none">Reviews</a>
        </div>
      </details>
    </nav>
    <p class="text-xs italic text-tdd09-mut">Click any nav item to toggle &mdash; no JavaScript on this one</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tdd09-bg1: #fffbeb;
  --color-tdd09-bg1: oklch(0.98 0.02 95);
  --color-tdd09-bg2: #fef3c7;
  --color-tdd09-bg2: oklch(0.95 0.06 92);
  --color-tdd09-ink: #1c1917;
  --color-tdd09-ink: oklch(0.22 0.01 60);
  --color-tdd09-mut: #78716c;
  --color-tdd09-mut: oklch(0.56 0.01 60);
  --color-tdd09-edge: #e7e5e4;
  --color-tdd09-edge: oklch(0.91 0.005 60);
  --color-tdd09-tint: #fef3c7;
  --color-tdd09-tint: oklch(0.95 0.06 92);
  --color-tdd09-acc: #b45309;
  --color-tdd09-acc: oklch(0.53 0.14 55);
  --font-tdd09-sans: 'Source Sans 3', system-ui, sans-serif;
  --font-tdd09-serif: 'Lora', Georgia, serif;
}

.tdd-09 {
  width: 100%;
  min-height: 100svh;
}

.tdd-09 ::selection {
  background: var(--color-tdd09-acc);
  color: #fffbeb;
}
```

How this works

The element is the state machine. No script, no checkbox, no data-*: clicking the summary adds the open attribute, and Enter/Space work because <summary> is natively focusable.

Why a direct-child variant. group-open: matches through every open ancestor, so in a nested disclosure it would open inner panels along with outer ones. [[open]>&]: compiles to [open] > .panel, which is exactly the relationship intended.

Animating a native disclosure is still a compromise. details shows and hides its content instantly, so a max-h-0 → max-h-100 transition plays on open and is skipped on close. That is a browser fact, not a Tailwind one.

The marker reset takes two utilities because Chrome and Safari disagree about which pseudo owns it.

Make it yours

  • Multi-level: nest a second <details> inside a panel — the direct-child variant means the outer one will not fight the inner one.
  • Chevron: the two bars are before:/after: pseudo-elements; swap them for a glyph if you prefer.
  • Exclusive accordion: give every <details> the same name attribute and the browser closes the others for you.
  • Open state colour: everything the summary shows when active is on the open: half of its class list.

Gotchas — read before shipping

  • The close transition does not play — the browser removes the content immediately. Accept it, or move to a JS-driven panel.
  • Hiding the marker needs both list-none and the ::-webkit-details-marker variant.
  • <details> does not close on outside click. That is native behaviour; add a script only if your design demands it.
  • group-open: looks tempting and is wrong for anything nestable — it matches through all open ancestors.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

details/summary is universally supported; the exclusive-accordion name attribute needs Chrome 120+/Safari 17.2+.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transitionstw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →