22 Tailwind Dropdown Menus
08 / 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 Underline Nav Fade Panel Dropdown

An editorial nav where a rule sweeps left-to-right under the hovered item and a plain panel fades in below. Two things make the port interesting: the underline is an after: pseudo styled entirely in utilities, and the visibility trick — the one transition Tailwind's scale genuinely cannot express — stays an arbitrary shorthand.

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-08 w-full min-h-svh bg-tdd08-bg font-tdd08-sans text-tdd08-ink px-5 py-8" aria-label="Underline nav fade panel dropdown demo">
  <nav class="relative z-10 mx-auto flex w-[min(680px,100%)] items-center border-b-2 border-tdd08-edge bg-white px-6" aria-label="Primary">
    <a href="#home" class="mr-8 py-4.5 font-tdd08-serif text-[22px] font-semibold tracking-[-0.5px] text-tdd08-ink no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd08-ink">The&nbsp;<em class="italic text-tdd08-amber">Edit</em></a>
    <div class="flex">
      <div class="group relative" style="--accent:#d97706">
        <a href="#collections" class="relative block px-4 py-4.5 text-[13.5px] font-medium tracking-[0.02em] text-tdd08-mut no-underline transition-colors duration-200 after:absolute after:inset-x-4 after:-bottom-0.5 after:h-0.5 after:origin-left after:scale-x-0 after:rounded-sm after:bg-[var(--accent)] after:transition-transform after:duration-250 after:ease-out after:content-[''] group-hover:text-tdd08-ink group-hover:after:scale-x-100 focus-visible:text-tdd08-ink focus-visible:after:scale-x-100 focus-visible:outline-none">Collections</a>
        <div class="pointer-events-none invisible absolute top-[calc(100%+2px)] left-0 flex gap-8 rounded-b-xl border border-t-0 border-tdd08-edge bg-white px-6 py-5 opacity-0 shadow-[0_12px_32px_oklch(0_0_0/0.08)] [transition:opacity_.22s_ease,visibility_0s_.22s] group-hover:pointer-events-auto group-hover:visible group-hover:opacity-100 group-hover:[transition:opacity_.22s_ease,visibility_0s_0s] group-focus-within:pointer-events-auto group-focus-within:visible group-focus-within:opacity-100">
          <div class="flex min-w-35 flex-col gap-1">
            <a href="#spring" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Spring 2025</a>
            <a href="#essentials" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Essentials</a>
            <a href="#archive" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Archive</a>
          </div>
          <div class="flex min-w-35 flex-col gap-1">
            <a href="#collabs" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Collaborations</a>
            <a href="#limited" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Limited Editions</a>
            <a href="#lookbook" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Lookbook</a>
          </div>
        </div>
      </div>
      <div class="group relative" style="--accent:#059669">
        <a href="#stories" class="relative block px-4 py-4.5 text-[13.5px] font-medium tracking-[0.02em] text-tdd08-mut no-underline transition-colors duration-200 after:absolute after:inset-x-4 after:-bottom-0.5 after:h-0.5 after:origin-left after:scale-x-0 after:rounded-sm after:bg-[var(--accent)] after:transition-transform after:duration-250 after:ease-out after:content-[''] group-hover:text-tdd08-ink group-hover:after:scale-x-100 focus-visible:text-tdd08-ink focus-visible:after:scale-x-100 focus-visible:outline-none">Stories</a>
        <div class="pointer-events-none invisible absolute top-[calc(100%+2px)] left-0 flex gap-8 rounded-b-xl border border-t-0 border-tdd08-edge bg-white px-6 py-5 opacity-0 shadow-[0_12px_32px_oklch(0_0_0/0.08)] [transition:opacity_.22s_ease,visibility_0s_.22s] group-hover:pointer-events-auto group-hover:visible group-hover:opacity-100 group-hover:[transition:opacity_.22s_ease,visibility_0s_0s] group-focus-within:pointer-events-auto group-focus-within:visible group-focus-within:opacity-100">
          <div class="flex min-w-35 flex-col gap-1">
            <a href="#features" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Feature Articles</a>
            <a href="#interviews" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Interviews</a>
            <a href="#profiles" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Profiles</a>
          </div>
          <div class="flex min-w-35 flex-col gap-1">
            <a href="#photography" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Photography</a>
            <a href="#film" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Film</a>
          </div>
        </div>
      </div>
      <div class="group relative" style="--accent:#7c3aed">
        <a href="#studio" class="relative block px-4 py-4.5 text-[13.5px] font-medium tracking-[0.02em] text-tdd08-mut no-underline transition-colors duration-200 after:absolute after:inset-x-4 after:-bottom-0.5 after:h-0.5 after:origin-left after:scale-x-0 after:rounded-sm after:bg-[var(--accent)] after:transition-transform after:duration-250 after:ease-out after:content-[''] group-hover:text-tdd08-ink group-hover:after:scale-x-100 focus-visible:text-tdd08-ink focus-visible:after:scale-x-100 focus-visible:outline-none">Studio</a>
        <div class="pointer-events-none invisible absolute top-[calc(100%+2px)] left-0 flex gap-8 rounded-b-xl border border-t-0 border-tdd08-edge bg-white px-6 py-5 opacity-0 shadow-[0_12px_32px_oklch(0_0_0/0.08)] [transition:opacity_.22s_ease,visibility_0s_.22s] group-hover:pointer-events-auto group-hover:visible group-hover:opacity-100 group-hover:[transition:opacity_.22s_ease,visibility_0s_0s] group-focus-within:pointer-events-auto group-focus-within:visible group-focus-within:opacity-100">
          <div class="flex min-w-35 flex-col gap-1">
            <a href="#about" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">About Us</a>
            <a href="#process" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Process</a>
            <a href="#careers" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Careers</a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tdd08-bg: #fafaf8;
  --color-tdd08-bg: oklch(0.98 0.003 100);
  --color-tdd08-ink: #1e293b;
  --color-tdd08-ink: oklch(0.28 0.03 260);
  --color-tdd08-mut: #64748b;
  --color-tdd08-mut: oklch(0.55 0.03 255);
  --color-tdd08-edge: #e2e8f0;
  --color-tdd08-edge: oklch(0.92 0.01 255);
  --color-tdd08-amber: #d97706;
  --color-tdd08-amber: oklch(0.65 0.15 60);
  --font-tdd08-sans: 'Inter', system-ui, sans-serif;
  --font-tdd08-serif: 'Fraunces', Georgia, serif;
}

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

.tdd-08 ::selection {
  background: var(--color-tdd08-ink);
  color: #f8fafc;
}

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-tdd08-bg: #fafaf8;
  --color-tdd08-bg: oklch(0.98 0.003 100);
  --color-tdd08-ink: #1e293b;
  --color-tdd08-ink: oklch(0.28 0.03 260);
  --color-tdd08-mut: #64748b;
  --color-tdd08-mut: oklch(0.55 0.03 255);
  --color-tdd08-edge: #e2e8f0;
  --color-tdd08-edge: oklch(0.92 0.01 255);
  --color-tdd08-amber: #d97706;
  --color-tdd08-amber: oklch(0.65 0.15 60);
  --font-tdd08-sans: 'Inter', system-ui, sans-serif;
  --font-tdd08-serif: 'Fraunces', Georgia, serif;
}

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

.tdd-08 ::selection {
  background: var(--color-tdd08-ink);
  color: #f8fafc;
}
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=Fraunces:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500&display=swap">

What changed in the port

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

  • The underline pseudo-element is fully expressible in utilities (after:*), which removes the demo's largest CSS block.
  • The delayed visibility is the collection's canonical example of an arbitrary [transition:...] shorthand earning its place: per-property delays have no utility form.
  • Per-item accents are inline custom properties for the same reason as demo 06's dot colours — three one-off hues are not a palette.
  • The serif/sans pairing lives entirely in two @theme font tokens, so font-tdd08-serif is available anywhere in the demo.
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 Underline Nav Fade Panel Dropdown
Source: https://codefronts.com/navigation/tailwind-dropdown-menus/tailwind-underline-nav-fade-panel-dropdown/

An editorial nav where a rule sweeps left-to-right under the hovered item and a plain panel fades in below. Two things make the port interesting: the underline is an after: pseudo styled entirely in utilities, and the visibility trick — the one transition Tailwind's scale genuinely cannot express — stays an arbitrary shorthand.
## HTML
```html
<section class="tdd-08 w-full min-h-svh bg-tdd08-bg font-tdd08-sans text-tdd08-ink px-5 py-8" aria-label="Underline nav fade panel dropdown demo">
  <nav class="relative z-10 mx-auto flex w-[min(680px,100%)] items-center border-b-2 border-tdd08-edge bg-white px-6" aria-label="Primary">
    <a href="#home" class="mr-8 py-4.5 font-tdd08-serif text-[22px] font-semibold tracking-[-0.5px] text-tdd08-ink no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd08-ink">The&nbsp;<em class="italic text-tdd08-amber">Edit</em></a>
    <div class="flex">
      <div class="group relative" style="--accent:#d97706">
        <a href="#collections" class="relative block px-4 py-4.5 text-[13.5px] font-medium tracking-[0.02em] text-tdd08-mut no-underline transition-colors duration-200 after:absolute after:inset-x-4 after:-bottom-0.5 after:h-0.5 after:origin-left after:scale-x-0 after:rounded-sm after:bg-[var(--accent)] after:transition-transform after:duration-250 after:ease-out after:content-[''] group-hover:text-tdd08-ink group-hover:after:scale-x-100 focus-visible:text-tdd08-ink focus-visible:after:scale-x-100 focus-visible:outline-none">Collections</a>
        <div class="pointer-events-none invisible absolute top-[calc(100%+2px)] left-0 flex gap-8 rounded-b-xl border border-t-0 border-tdd08-edge bg-white px-6 py-5 opacity-0 shadow-[0_12px_32px_oklch(0_0_0/0.08)] [transition:opacity_.22s_ease,visibility_0s_.22s] group-hover:pointer-events-auto group-hover:visible group-hover:opacity-100 group-hover:[transition:opacity_.22s_ease,visibility_0s_0s] group-focus-within:pointer-events-auto group-focus-within:visible group-focus-within:opacity-100">
          <div class="flex min-w-35 flex-col gap-1">
            <a href="#spring" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Spring 2025</a>
            <a href="#essentials" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Essentials</a>
            <a href="#archive" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Archive</a>
          </div>
          <div class="flex min-w-35 flex-col gap-1">
            <a href="#collabs" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Collaborations</a>
            <a href="#limited" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Limited Editions</a>
            <a href="#lookbook" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Lookbook</a>
          </div>
        </div>
      </div>
      <div class="group relative" style="--accent:#059669">
        <a href="#stories" class="relative block px-4 py-4.5 text-[13.5px] font-medium tracking-[0.02em] text-tdd08-mut no-underline transition-colors duration-200 after:absolute after:inset-x-4 after:-bottom-0.5 after:h-0.5 after:origin-left after:scale-x-0 after:rounded-sm after:bg-[var(--accent)] after:transition-transform after:duration-250 after:ease-out after:content-[''] group-hover:text-tdd08-ink group-hover:after:scale-x-100 focus-visible:text-tdd08-ink focus-visible:after:scale-x-100 focus-visible:outline-none">Stories</a>
        <div class="pointer-events-none invisible absolute top-[calc(100%+2px)] left-0 flex gap-8 rounded-b-xl border border-t-0 border-tdd08-edge bg-white px-6 py-5 opacity-0 shadow-[0_12px_32px_oklch(0_0_0/0.08)] [transition:opacity_.22s_ease,visibility_0s_.22s] group-hover:pointer-events-auto group-hover:visible group-hover:opacity-100 group-hover:[transition:opacity_.22s_ease,visibility_0s_0s] group-focus-within:pointer-events-auto group-focus-within:visible group-focus-within:opacity-100">
          <div class="flex min-w-35 flex-col gap-1">
            <a href="#features" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Feature Articles</a>
            <a href="#interviews" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Interviews</a>
            <a href="#profiles" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Profiles</a>
          </div>
          <div class="flex min-w-35 flex-col gap-1">
            <a href="#photography" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Photography</a>
            <a href="#film" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Film</a>
          </div>
        </div>
      </div>
      <div class="group relative" style="--accent:#7c3aed">
        <a href="#studio" class="relative block px-4 py-4.5 text-[13.5px] font-medium tracking-[0.02em] text-tdd08-mut no-underline transition-colors duration-200 after:absolute after:inset-x-4 after:-bottom-0.5 after:h-0.5 after:origin-left after:scale-x-0 after:rounded-sm after:bg-[var(--accent)] after:transition-transform after:duration-250 after:ease-out after:content-[''] group-hover:text-tdd08-ink group-hover:after:scale-x-100 focus-visible:text-tdd08-ink focus-visible:after:scale-x-100 focus-visible:outline-none">Studio</a>
        <div class="pointer-events-none invisible absolute top-[calc(100%+2px)] left-0 flex gap-8 rounded-b-xl border border-t-0 border-tdd08-edge bg-white px-6 py-5 opacity-0 shadow-[0_12px_32px_oklch(0_0_0/0.08)] [transition:opacity_.22s_ease,visibility_0s_.22s] group-hover:pointer-events-auto group-hover:visible group-hover:opacity-100 group-hover:[transition:opacity_.22s_ease,visibility_0s_0s] group-focus-within:pointer-events-auto group-focus-within:visible group-focus-within:opacity-100">
          <div class="flex min-w-35 flex-col gap-1">
            <a href="#about" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">About Us</a>
            <a href="#process" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Process</a>
            <a href="#careers" class="block border-b border-transparent py-1.5 font-tdd08-serif text-[15px] text-tdd08-mut no-underline transition-colors duration-150 hover:border-b-[var(--accent)] hover:text-tdd08-ink focus-visible:text-tdd08-ink focus-visible:outline-none">Careers</a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tdd08-bg: #fafaf8;
  --color-tdd08-bg: oklch(0.98 0.003 100);
  --color-tdd08-ink: #1e293b;
  --color-tdd08-ink: oklch(0.28 0.03 260);
  --color-tdd08-mut: #64748b;
  --color-tdd08-mut: oklch(0.55 0.03 255);
  --color-tdd08-edge: #e2e8f0;
  --color-tdd08-edge: oklch(0.92 0.01 255);
  --color-tdd08-amber: #d97706;
  --color-tdd08-amber: oklch(0.65 0.15 60);
  --font-tdd08-sans: 'Inter', system-ui, sans-serif;
  --font-tdd08-serif: 'Fraunces', Georgia, serif;
}

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

.tdd-08 ::selection {
  background: var(--color-tdd08-ink);
  color: #f8fafc;
}
```

How this works

The underline is a pseudo-element with a transform origin. scale-x-0 resting, origin-left, group-hover:after:scale-x-100 — a wipe rather than a fade, which is what makes it feel like a selection.

Why invisible and not just opacity-0. A transparent panel is still focusable, so a keyboard user tabs into links they cannot see. visibility fixes that but is binary, so it needs a delay on close and none on open:

class="invisible opacity-0 [transition:opacity_.22s_ease,visibility_0s_.22s]
  group-hover:visible group-hover:opacity-100
  group-hover:[transition:opacity_.22s_ease,visibility_0s_0s]"

This is the one place the arbitrary shorthand beats Tailwind's transition-*/delay-* scale, which applies one delay to every property in the list.

The accent is per item, so it is a custom property, not three theme tokens: the underline, the link underline-on-hover and the focus ring all read --accent.

Make it yours

  • Sweep from centre: after:origin-left → after:origin-center.
  • Weight: after:h-0.5 → after:h-[3px] after:rounded-full.
  • Accent per item: edit the inline --accent; nothing else needs to change.
  • Panel shape: it is square-cornered at the top by design (rounded-b-xl) so it reads as attached to the bar.

Gotchas — read before shipping

  • visibility transitions are binary — always pair with opacity or the panel snaps.
  • Without the closing delay on visibility, the panel disappears before the fade finishes and clicks fall through mid-animation.
  • The after: underline needs its parent to be positioned; the trigger carries relative.
  • after:inset-x-4 must match the trigger's horizontal padding or the rule overhangs the label.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

The visibility+opacity pattern is universally supported; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transform origintw ↗pseudo elementstw ↗transitionstw ↗

Theme tokensset in @theme, used by a utility

custom propertiestw ↗oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →