22 Tailwind Dropdown Menus
01 / 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 Slide-Down Fade Dropdown Menu

The default dropdown, and the one worth porting first: hover a nav item and its panel grows down while the content fades in a beat later. In utilities the two-speed reveal is a single transition-[max-height,opacity,translate] plus one arbitrary transition-delay, and the hover bridge that keeps the menu alive across the gap is an after: strip on the group itself.

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-01 w-full min-h-svh grid place-items-center bg-linear-[135deg,var(--color-tdd01-bg1),var(--color-tdd01-bg2)] font-tdd01-sans text-tdd01-ink px-5 py-10" aria-label="Slide-down fade dropdown demo">
  <nav class="relative z-10 flex items-center gap-1 rounded-2xl border border-tdd01-edge bg-white px-3 py-2 shadow-[0_2px_12px_oklch(0_0_0/0.06)]" aria-label="Primary">
    <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2 after:content-['']">
      <a href="#products" class="flex items-center gap-1.5 whitespace-nowrap rounded-lg px-3.5 py-2 text-sm font-medium text-tdd01-ink no-underline transition-colors duration-200 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd01-acc">Products <span class="mt-px inline-block text-xs leading-none text-tdd01-mut transition-transform duration-250 group-hover:rotate-180 group-hover:text-tdd01-acc group-focus-within:rotate-180 motion-reduce:transition-none">&#9662;</span></a>
      <ul class="pointer-events-none absolute top-[calc(100%+8px)] left-1/2 min-w-50 max-h-0 -translate-x-1/2 -translate-y-1.5 list-none overflow-hidden rounded-xl border border-tdd01-edge bg-white p-1.5 opacity-0 shadow-[0_10px_40px_oklch(0.55_0.2_280/0.15)] transition-[max-height,opacity,translate] duration-350 ease-out group-hover:pointer-events-auto group-hover:max-h-80 group-hover:translate-y-0 group-hover:opacity-100 group-hover:delay-75 group-focus-within:pointer-events-auto group-focus-within:max-h-80 group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:transition-none">
        <li><a href="#design-system" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Design System</a></li>
        <li><a href="#components" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Component Library</a></li>
        <li><a href="#icons" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Icon Pack</a></li>
        <li><a href="#templates" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Templates</a></li>
      </ul>
    </div>
    <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2 after:content-['']">
      <a href="#solutions" class="flex items-center gap-1.5 whitespace-nowrap rounded-lg px-3.5 py-2 text-sm font-medium text-tdd01-ink no-underline transition-colors duration-200 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd01-acc">Solutions <span class="mt-px inline-block text-xs leading-none text-tdd01-mut transition-transform duration-250 group-hover:rotate-180 group-hover:text-tdd01-acc group-focus-within:rotate-180 motion-reduce:transition-none">&#9662;</span></a>
      <ul class="pointer-events-none absolute top-[calc(100%+8px)] left-1/2 min-w-50 max-h-0 -translate-x-1/2 -translate-y-1.5 list-none overflow-hidden rounded-xl border border-tdd01-edge bg-white p-1.5 opacity-0 shadow-[0_10px_40px_oklch(0.55_0.2_280/0.15)] transition-[max-height,opacity,translate] duration-350 ease-out group-hover:pointer-events-auto group-hover:max-h-80 group-hover:translate-y-0 group-hover:opacity-100 group-hover:delay-75 group-focus-within:pointer-events-auto group-focus-within:max-h-80 group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:transition-none">
        <li><a href="#startups" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>For Startups</a></li>
        <li><a href="#enterprise" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>For Enterprise</a></li>
        <li><a href="#agencies" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>For Agencies</a></li>
      </ul>
    </div>
    <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2 after:content-['']">
      <a href="#resources" class="flex items-center gap-1.5 whitespace-nowrap rounded-lg px-3.5 py-2 text-sm font-medium text-tdd01-ink no-underline transition-colors duration-200 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd01-acc">Resources <span class="mt-px inline-block text-xs leading-none text-tdd01-mut transition-transform duration-250 group-hover:rotate-180 group-hover:text-tdd01-acc group-focus-within:rotate-180 motion-reduce:transition-none">&#9662;</span></a>
      <ul class="pointer-events-none absolute top-[calc(100%+8px)] left-1/2 min-w-50 max-h-0 -translate-x-1/2 -translate-y-1.5 list-none overflow-hidden rounded-xl border border-tdd01-edge bg-white p-1.5 opacity-0 shadow-[0_10px_40px_oklch(0.55_0.2_280/0.15)] transition-[max-height,opacity,translate] duration-350 ease-out group-hover:pointer-events-auto group-hover:max-h-80 group-hover:translate-y-0 group-hover:opacity-100 group-hover:delay-75 group-focus-within:pointer-events-auto group-focus-within:max-h-80 group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:transition-none">
        <li><a href="#docs" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Documentation</a></li>
        <li><a href="#blog" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Blog</a></li>
        <li><a href="#community" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Community</a></li>
        <li><a href="#changelog" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Changelog</a></li>
      </ul>
    </div>
    <a href="#start" class="ml-2 rounded-lg bg-tdd01-acc px-4.5 py-2 text-sm font-semibold text-white no-underline transition-[background,translate] duration-200 hover:bg-tdd01-accdark hover:-translate-y-px focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd01-accdark motion-reduce:transition-none">Get Started</a>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tdd01-bg1: #f0f4ff;
  --color-tdd01-bg1: oklch(0.96 0.02 265);
  --color-tdd01-bg2: #faf5ff;
  --color-tdd01-bg2: oklch(0.97 0.02 305);
  --color-tdd01-ink: #111827;
  --color-tdd01-ink: oklch(0.21 0.02 265);
  --color-tdd01-mut: #6b7280;
  --color-tdd01-mut: oklch(0.55 0.02 265);
  --color-tdd01-edge: #e5e7eb;
  --color-tdd01-edge: oklch(0.91 0.005 265);
  --color-tdd01-tint: #f5f3ff;
  --color-tdd01-tint: oklch(0.97 0.02 295);
  --color-tdd01-acc: #6366f1;
  --color-tdd01-acc: oklch(0.59 0.2 278);
  --color-tdd01-accdark: #4f46e5;
  --color-tdd01-accdark: oklch(0.53 0.22 278);
  --font-tdd01-sans: 'Inter', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the stage is sized before the browser build compiles. */

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

.tdd-01 ::selection {
  background: var(--color-tdd01-acc);
  color: #fff;
}

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-tdd01-bg1: #f0f4ff;
  --color-tdd01-bg1: oklch(0.96 0.02 265);
  --color-tdd01-bg2: #faf5ff;
  --color-tdd01-bg2: oklch(0.97 0.02 305);
  --color-tdd01-ink: #111827;
  --color-tdd01-ink: oklch(0.21 0.02 265);
  --color-tdd01-mut: #6b7280;
  --color-tdd01-mut: oklch(0.55 0.02 265);
  --color-tdd01-edge: #e5e7eb;
  --color-tdd01-edge: oklch(0.91 0.005 265);
  --color-tdd01-tint: #f5f3ff;
  --color-tdd01-tint: oklch(0.97 0.02 295);
  --color-tdd01-acc: #6366f1;
  --color-tdd01-acc: oklch(0.59 0.2 278);
  --color-tdd01-accdark: #4f46e5;
  --color-tdd01-accdark: oklch(0.53 0.22 278);
  --font-tdd01-sans: 'Inter', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the stage is sized before the browser build compiles. */

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

.tdd-01 ::selection {
  background: var(--color-tdd01-acc);
  color: #fff;
}
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=Inter:wght@400;500;600&display=swap">

What changed in the port

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

  • Four .item:hover .panel rule pairs collapse into group + group-hover:, and every one of them gained a group-focus-within: twin that the CSS original never had.
  • The hover bridge stops being a commented ::after block in the stylesheet and becomes four visible classes on the element that owns the hover.
  • group-hover:delay-75 replaces the original's opacity .22s ease .05s third transition component — the delay is now readable without parsing a shorthand.
  • The two-tone panel shadow is a single arbitrary shadow-[…] in oklch, matching the collection's colour rule.
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 Slide-Down Fade Dropdown Menu
Source: https://codefronts.com/navigation/tailwind-dropdown-menus/tailwind-slide-down-fade-dropdown-menu/

The default dropdown, and the one worth porting first: hover a nav item and its panel grows down while the content fades in a beat later. In utilities the two-speed reveal is a single transition-[max-height,opacity,translate] plus one arbitrary transition-delay, and the hover bridge that keeps the menu alive across the gap is an after: strip on the group itself.
## HTML
```html
<section class="tdd-01 w-full min-h-svh grid place-items-center bg-linear-[135deg,var(--color-tdd01-bg1),var(--color-tdd01-bg2)] font-tdd01-sans text-tdd01-ink px-5 py-10" aria-label="Slide-down fade dropdown demo">
  <nav class="relative z-10 flex items-center gap-1 rounded-2xl border border-tdd01-edge bg-white px-3 py-2 shadow-[0_2px_12px_oklch(0_0_0/0.06)]" aria-label="Primary">
    <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2 after:content-['']">
      <a href="#products" class="flex items-center gap-1.5 whitespace-nowrap rounded-lg px-3.5 py-2 text-sm font-medium text-tdd01-ink no-underline transition-colors duration-200 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd01-acc">Products <span class="mt-px inline-block text-xs leading-none text-tdd01-mut transition-transform duration-250 group-hover:rotate-180 group-hover:text-tdd01-acc group-focus-within:rotate-180 motion-reduce:transition-none">&#9662;</span></a>
      <ul class="pointer-events-none absolute top-[calc(100%+8px)] left-1/2 min-w-50 max-h-0 -translate-x-1/2 -translate-y-1.5 list-none overflow-hidden rounded-xl border border-tdd01-edge bg-white p-1.5 opacity-0 shadow-[0_10px_40px_oklch(0.55_0.2_280/0.15)] transition-[max-height,opacity,translate] duration-350 ease-out group-hover:pointer-events-auto group-hover:max-h-80 group-hover:translate-y-0 group-hover:opacity-100 group-hover:delay-75 group-focus-within:pointer-events-auto group-focus-within:max-h-80 group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:transition-none">
        <li><a href="#design-system" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Design System</a></li>
        <li><a href="#components" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Component Library</a></li>
        <li><a href="#icons" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Icon Pack</a></li>
        <li><a href="#templates" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Templates</a></li>
      </ul>
    </div>
    <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2 after:content-['']">
      <a href="#solutions" class="flex items-center gap-1.5 whitespace-nowrap rounded-lg px-3.5 py-2 text-sm font-medium text-tdd01-ink no-underline transition-colors duration-200 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd01-acc">Solutions <span class="mt-px inline-block text-xs leading-none text-tdd01-mut transition-transform duration-250 group-hover:rotate-180 group-hover:text-tdd01-acc group-focus-within:rotate-180 motion-reduce:transition-none">&#9662;</span></a>
      <ul class="pointer-events-none absolute top-[calc(100%+8px)] left-1/2 min-w-50 max-h-0 -translate-x-1/2 -translate-y-1.5 list-none overflow-hidden rounded-xl border border-tdd01-edge bg-white p-1.5 opacity-0 shadow-[0_10px_40px_oklch(0.55_0.2_280/0.15)] transition-[max-height,opacity,translate] duration-350 ease-out group-hover:pointer-events-auto group-hover:max-h-80 group-hover:translate-y-0 group-hover:opacity-100 group-hover:delay-75 group-focus-within:pointer-events-auto group-focus-within:max-h-80 group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:transition-none">
        <li><a href="#startups" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>For Startups</a></li>
        <li><a href="#enterprise" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>For Enterprise</a></li>
        <li><a href="#agencies" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>For Agencies</a></li>
      </ul>
    </div>
    <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2 after:content-['']">
      <a href="#resources" class="flex items-center gap-1.5 whitespace-nowrap rounded-lg px-3.5 py-2 text-sm font-medium text-tdd01-ink no-underline transition-colors duration-200 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd01-acc">Resources <span class="mt-px inline-block text-xs leading-none text-tdd01-mut transition-transform duration-250 group-hover:rotate-180 group-hover:text-tdd01-acc group-focus-within:rotate-180 motion-reduce:transition-none">&#9662;</span></a>
      <ul class="pointer-events-none absolute top-[calc(100%+8px)] left-1/2 min-w-50 max-h-0 -translate-x-1/2 -translate-y-1.5 list-none overflow-hidden rounded-xl border border-tdd01-edge bg-white p-1.5 opacity-0 shadow-[0_10px_40px_oklch(0.55_0.2_280/0.15)] transition-[max-height,opacity,translate] duration-350 ease-out group-hover:pointer-events-auto group-hover:max-h-80 group-hover:translate-y-0 group-hover:opacity-100 group-hover:delay-75 group-focus-within:pointer-events-auto group-focus-within:max-h-80 group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:transition-none">
        <li><a href="#docs" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Documentation</a></li>
        <li><a href="#blog" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Blog</a></li>
        <li><a href="#community" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Community</a></li>
        <li><a href="#changelog" class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13.5px] font-medium text-tdd01-ink no-underline transition-colors duration-150 hover:bg-tdd01-tint hover:text-tdd01-acc focus-visible:bg-tdd01-tint focus-visible:outline-none"><i class="size-1.5 rounded-[1px] rotate-45 bg-tdd01-acc/60" aria-hidden="true"></i>Changelog</a></li>
      </ul>
    </div>
    <a href="#start" class="ml-2 rounded-lg bg-tdd01-acc px-4.5 py-2 text-sm font-semibold text-white no-underline transition-[background,translate] duration-200 hover:bg-tdd01-accdark hover:-translate-y-px focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd01-accdark motion-reduce:transition-none">Get Started</a>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tdd01-bg1: #f0f4ff;
  --color-tdd01-bg1: oklch(0.96 0.02 265);
  --color-tdd01-bg2: #faf5ff;
  --color-tdd01-bg2: oklch(0.97 0.02 305);
  --color-tdd01-ink: #111827;
  --color-tdd01-ink: oklch(0.21 0.02 265);
  --color-tdd01-mut: #6b7280;
  --color-tdd01-mut: oklch(0.55 0.02 265);
  --color-tdd01-edge: #e5e7eb;
  --color-tdd01-edge: oklch(0.91 0.005 265);
  --color-tdd01-tint: #f5f3ff;
  --color-tdd01-tint: oklch(0.97 0.02 295);
  --color-tdd01-acc: #6366f1;
  --color-tdd01-acc: oklch(0.59 0.2 278);
  --color-tdd01-accdark: #4f46e5;
  --color-tdd01-accdark: oklch(0.53 0.22 278);
  --font-tdd01-sans: 'Inter', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the stage is sized before the browser build compiles. */

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

.tdd-01 ::selection {
  background: var(--color-tdd01-acc);
  color: #fff;
}
```

How this works

The panel holds both states. Closed geometry and open geometry sit in one class list, so they cannot drift:

<ul class="max-h-0 opacity-0 -translate-y-1.5 pointer-events-none
  group-hover:max-h-80 group-hover:opacity-100
  group-hover:translate-y-0 group-hover:pointer-events-auto">

Two speeds, one transition. transition-[max-height,opacity,translate] with duration-350 and group-hover:delay-75 reproduces the original's staged feel: the container grows first, the links catch up.

The bridge is not decoration. There are 8px of visible gap between trigger and panel, and a closed panel is pointer-events-none, so it cannot keep its own hover alive. The after: strip on the group covers exactly that gap.

Keyboard parity comes free. Every group-hover: gets a group-focus-within: twin, so tabbing into a trigger opens the same panel — three extra classes, and the pattern stops being mouse-only.

Make it yours

  • Reveal speed: duration-350 on the panel. Keep max-h-* close to real content height — an oversized ceiling makes the tail of the animation look slow.
  • Caret behaviour: the chevron is a span with group-hover:rotate-180; swap for group-hover:translate-y-0.5 if you prefer a nudge.
  • Elevation: shadow-[0_10px_40px_oklch(0.55_0.2_280/0.15)] on the panel — raise the blur for more lift.
  • Recolour through --color-tdd01-acc in @theme; the caret, hover tint, CTA and focus ring all read it.

Gotchas — read before shipping

  • max-h-* transitions distort: if content is 120px and the ceiling is 600px, the reveal appears to stall near the end. Size the ceiling to the content.
  • On touch, :hover sticks after the first tap. For production add a data-open toggle and read it with group-data-open: alongside the hover variant.
  • group-hover:pointer-events-auto is load-bearing — without it the panel is visible but dead, because pointer-events-none does not lift on its own.
  • overflow-hidden clips the panel's own shadow; keep elevation on the panel and the clipping on nothing else.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

The pattern itself (max-height + opacity transitions) runs everywhere; the floor quoted is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transitionstw ↗transition delaytw ↗pseudo elementstw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →