22 Tailwind Dropdown Menus
13 / 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 Split-Screen Mega Menu Dropdown

The retail mega menu: a billboard column on the left, categorised links on the right, one grid-cols-[1.2fr_1fr] holding the split. It is the demo where Tailwind's ratio tracks and per-instance overrides shine — the second panel restyles its whole billboard with a single gradient utility, no modifier class.

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-13 w-full min-h-svh bg-tdd13-bg font-tdd13-sans text-tdd13-ink px-5 py-8" aria-label="Split-screen mega menu dropdown demo">
  <nav class="relative z-10 mx-auto flex w-[min(720px,100%)] items-center gap-1 rounded-t-xl border-b border-tdd13-edge bg-white px-5 shadow-[0_2px_12px_oklch(0_0_0/0.05)]" aria-label="Primary">
    <a href="#home" class="mr-6 py-4 font-tdd13-serif text-xl font-bold tracking-[-0.3px] text-tdd13-ink no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd13-ink">Meridian</a>
    <div class="ml-auto flex items-center">
      <div class="group relative">
        <a href="#collections" class="block px-3.5 py-4.5 text-[13.5px] font-medium tracking-[0.03em] text-tdd13-mut no-underline transition-colors duration-150 group-hover:text-tdd13-ink focus-visible:text-tdd13-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd13-ink">Collections &#9662;</a>
        <div class="pointer-events-none absolute top-full left-1/2 grid w-[min(580px,90vw)] -translate-x-1/2 -translate-y-2.5 grid-cols-[1.2fr_1fr] overflow-hidden rounded-b-2xl border border-t-0 border-tdd13-edge bg-white opacity-0 shadow-[0_24px_60px_oklch(0_0_0/0.13)] transition-[opacity,translate] duration-320 ease-tdd13 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100 max-sm:grid-cols-1 motion-reduce:duration-150">
          <div class="flex min-h-55 flex-col gap-2 bg-linear-[145deg,var(--color-tdd13-slate1),var(--color-tdd13-slate2)_50%,var(--color-tdd13-slate3)] px-6 py-7">
            <p class="text-[10px] font-semibold uppercase tracking-[0.12em] text-white/50">Season Highlight</p>
            <p class="font-tdd13-serif text-xl font-bold leading-tight text-white">Summer Capsule 2025</p>
            <p class="mt-1 flex-1 text-[12.5px] leading-relaxed text-white/70 text-pretty">Refined essentials for the modern wardrobe.</p>
            <a href="#explore" class="mt-2 text-[12.5px] font-semibold tracking-[0.03em] text-white/85 no-underline transition-colors duration-150 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Explore Now &#8594;</a>
          </div>
          <div class="grid grid-cols-2 gap-6 px-5 py-6">
            <div class="flex flex-col gap-1">
              <p class="mb-1.5 border-b border-tdd13-edge pb-1.5 text-[10px] font-bold uppercase tracking-[0.1em] text-tdd13-mut">Women</p>
              <a href="#rtw" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Ready to Wear</a>
              <a href="#accessories" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Accessories</a>
              <a href="#footwear" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Footwear</a>
            </div>
            <div class="flex flex-col gap-1">
              <p class="mb-1.5 border-b border-tdd13-edge pb-1.5 text-[10px] font-bold uppercase tracking-[0.1em] text-tdd13-mut">Men</p>
              <a href="#tailoring" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Tailoring</a>
              <a href="#casual" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Casual</a>
              <a href="#sport" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Sport</a>
            </div>
          </div>
        </div>
      </div>
      <div class="group relative">
        <a href="#stories" class="block px-3.5 py-4.5 text-[13.5px] font-medium tracking-[0.03em] text-tdd13-mut no-underline transition-colors duration-150 group-hover:text-tdd13-ink focus-visible:text-tdd13-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd13-ink">Stories &#9662;</a>
        <div class="pointer-events-none absolute top-full left-1/2 grid w-[min(580px,90vw)] -translate-x-1/2 -translate-y-2.5 grid-cols-[1.2fr_1fr] overflow-hidden rounded-b-2xl border border-t-0 border-tdd13-edge bg-white opacity-0 shadow-[0_24px_60px_oklch(0_0_0/0.13)] transition-[opacity,translate] duration-320 ease-tdd13 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100 max-sm:grid-cols-1 motion-reduce:duration-150">
          <div class="flex min-h-55 flex-col gap-2 bg-linear-[145deg,var(--color-tdd13-green1),var(--color-tdd13-green2)_50%,var(--color-tdd13-green3)] px-6 py-7">
            <p class="text-[10px] font-semibold uppercase tracking-[0.12em] text-white/50">From the Journal</p>
            <p class="font-tdd13-serif text-xl font-bold leading-tight text-white">The Art of Slow Fashion</p>
            <p class="mt-1 flex-1 text-[12.5px] leading-relaxed text-white/70 text-pretty">Conscious design for the discerning eye.</p>
            <a href="#read" class="mt-2 text-[12.5px] font-semibold tracking-[0.03em] text-white/85 no-underline transition-colors duration-150 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Read Story &#8594;</a>
          </div>
          <div class="grid grid-cols-2 gap-6 px-5 py-6">
            <div class="flex flex-col gap-1">
              <p class="mb-1.5 border-b border-tdd13-edge pb-1.5 text-[10px] font-bold uppercase tracking-[0.1em] text-tdd13-mut">Editorials</p>
              <a href="#photography" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Photography</a>
              <a href="#film" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Film</a>
              <a href="#interviews" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Interviews</a>
            </div>
            <div class="flex flex-col gap-1">
              <p class="mb-1.5 border-b border-tdd13-edge pb-1.5 text-[10px] font-bold uppercase tracking-[0.1em] text-tdd13-mut">Craft</p>
              <a href="#materials" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Materials</a>
              <a href="#atelier" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Atelier</a>
            </div>
          </div>
        </div>
      </div>
      <a href="#world" class="block px-3.5 py-4.5 text-[13.5px] font-medium tracking-[0.03em] text-tdd13-mut no-underline transition-colors duration-150 hover:text-tdd13-ink focus-visible:text-tdd13-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd13-ink">World</a>
      <a href="#services" class="block px-3.5 py-4.5 text-[13.5px] font-medium tracking-[0.03em] text-tdd13-mut no-underline transition-colors duration-150 hover:text-tdd13-ink focus-visible:text-tdd13-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd13-ink">Services</a>
    </div>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tdd13-bg: #f8f7f4;
  --color-tdd13-bg: oklch(0.97 0.005 95);
  --color-tdd13-ink: #1e293b;
  --color-tdd13-ink: oklch(0.28 0.03 260);
  --color-tdd13-mut: #64748b;
  --color-tdd13-mut: oklch(0.55 0.03 255);
  --color-tdd13-edge: #e2e8f0;
  --color-tdd13-edge: oklch(0.92 0.01 255);
  --color-tdd13-acc: #0ea5e9;
  --color-tdd13-acc: oklch(0.68 0.15 233);
  --color-tdd13-slate1: #1e293b;
  --color-tdd13-slate1: oklch(0.28 0.03 260);
  --color-tdd13-slate2: #334155;
  --color-tdd13-slate2: oklch(0.37 0.03 258);
  --color-tdd13-slate3: #475569;
  --color-tdd13-slate3: oklch(0.45 0.03 257);
  --color-tdd13-green1: #065f46;
  --color-tdd13-green1: oklch(0.42 0.1 165);
  --color-tdd13-green2: #047857;
  --color-tdd13-green2: oklch(0.49 0.12 165);
  --color-tdd13-green3: #10b981;
  --color-tdd13-green3: oklch(0.7 0.16 163);
  --font-tdd13-sans: 'Inter', system-ui, sans-serif;
  --font-tdd13-serif: 'Playfair Display', Georgia, serif;
  --ease-tdd13: cubic-bezier(0.16, 1, 0.3, 1);
}

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

.tdd-13 ::selection {
  background: var(--color-tdd13-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-tdd13-bg: #f8f7f4;
  --color-tdd13-bg: oklch(0.97 0.005 95);
  --color-tdd13-ink: #1e293b;
  --color-tdd13-ink: oklch(0.28 0.03 260);
  --color-tdd13-mut: #64748b;
  --color-tdd13-mut: oklch(0.55 0.03 255);
  --color-tdd13-edge: #e2e8f0;
  --color-tdd13-edge: oklch(0.92 0.01 255);
  --color-tdd13-acc: #0ea5e9;
  --color-tdd13-acc: oklch(0.68 0.15 233);
  --color-tdd13-slate1: #1e293b;
  --color-tdd13-slate1: oklch(0.28 0.03 260);
  --color-tdd13-slate2: #334155;
  --color-tdd13-slate2: oklch(0.37 0.03 258);
  --color-tdd13-slate3: #475569;
  --color-tdd13-slate3: oklch(0.45 0.03 257);
  --color-tdd13-green1: #065f46;
  --color-tdd13-green1: oklch(0.42 0.1 165);
  --color-tdd13-green2: #047857;
  --color-tdd13-green2: oklch(0.49 0.12 165);
  --color-tdd13-green3: #10b981;
  --color-tdd13-green3: oklch(0.7 0.16 163);
  --font-tdd13-sans: 'Inter', system-ui, sans-serif;
  --font-tdd13-serif: 'Playfair Display', Georgia, serif;
  --ease-tdd13: cubic-bezier(0.16, 1, 0.3, 1);
}

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

.tdd-13 ::selection {
  background: var(--color-tdd13-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=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap">

What changed in the port

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

  • The second panel's alternate colourway is the clearest small argument for utilities: a per-instance gradient instead of an inline style patch or a one-off modifier class.
  • The panel is flush with the bar (top-full, square top corners), which removes the need for a hover bridge entirely — geometry solving a hover problem.
  • max-sm:grid-cols-1 answers the CSS version's viewport gotcha in the same class list as the grid it fixes.
  • Both gradient palettes are theme tokens because they are brand colours reused across panels; the ratios and clamps stay arbitrary.
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 Split-Screen Mega Menu Dropdown
Source: https://codefronts.com/navigation/tailwind-dropdown-menus/tailwind-split-screen-mega-menu-dropdown/

The retail mega menu: a billboard column on the left, categorised links on the right, one grid-cols-[1.2fr_1fr] holding the split. It is the demo where Tailwind's ratio tracks and per-instance overrides shine — the second panel restyles its whole billboard with a single gradient utility, no modifier class.
## HTML
```html
<section class="tdd-13 w-full min-h-svh bg-tdd13-bg font-tdd13-sans text-tdd13-ink px-5 py-8" aria-label="Split-screen mega menu dropdown demo">
  <nav class="relative z-10 mx-auto flex w-[min(720px,100%)] items-center gap-1 rounded-t-xl border-b border-tdd13-edge bg-white px-5 shadow-[0_2px_12px_oklch(0_0_0/0.05)]" aria-label="Primary">
    <a href="#home" class="mr-6 py-4 font-tdd13-serif text-xl font-bold tracking-[-0.3px] text-tdd13-ink no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd13-ink">Meridian</a>
    <div class="ml-auto flex items-center">
      <div class="group relative">
        <a href="#collections" class="block px-3.5 py-4.5 text-[13.5px] font-medium tracking-[0.03em] text-tdd13-mut no-underline transition-colors duration-150 group-hover:text-tdd13-ink focus-visible:text-tdd13-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd13-ink">Collections &#9662;</a>
        <div class="pointer-events-none absolute top-full left-1/2 grid w-[min(580px,90vw)] -translate-x-1/2 -translate-y-2.5 grid-cols-[1.2fr_1fr] overflow-hidden rounded-b-2xl border border-t-0 border-tdd13-edge bg-white opacity-0 shadow-[0_24px_60px_oklch(0_0_0/0.13)] transition-[opacity,translate] duration-320 ease-tdd13 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100 max-sm:grid-cols-1 motion-reduce:duration-150">
          <div class="flex min-h-55 flex-col gap-2 bg-linear-[145deg,var(--color-tdd13-slate1),var(--color-tdd13-slate2)_50%,var(--color-tdd13-slate3)] px-6 py-7">
            <p class="text-[10px] font-semibold uppercase tracking-[0.12em] text-white/50">Season Highlight</p>
            <p class="font-tdd13-serif text-xl font-bold leading-tight text-white">Summer Capsule 2025</p>
            <p class="mt-1 flex-1 text-[12.5px] leading-relaxed text-white/70 text-pretty">Refined essentials for the modern wardrobe.</p>
            <a href="#explore" class="mt-2 text-[12.5px] font-semibold tracking-[0.03em] text-white/85 no-underline transition-colors duration-150 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Explore Now &#8594;</a>
          </div>
          <div class="grid grid-cols-2 gap-6 px-5 py-6">
            <div class="flex flex-col gap-1">
              <p class="mb-1.5 border-b border-tdd13-edge pb-1.5 text-[10px] font-bold uppercase tracking-[0.1em] text-tdd13-mut">Women</p>
              <a href="#rtw" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Ready to Wear</a>
              <a href="#accessories" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Accessories</a>
              <a href="#footwear" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Footwear</a>
            </div>
            <div class="flex flex-col gap-1">
              <p class="mb-1.5 border-b border-tdd13-edge pb-1.5 text-[10px] font-bold uppercase tracking-[0.1em] text-tdd13-mut">Men</p>
              <a href="#tailoring" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Tailoring</a>
              <a href="#casual" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Casual</a>
              <a href="#sport" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Sport</a>
            </div>
          </div>
        </div>
      </div>
      <div class="group relative">
        <a href="#stories" class="block px-3.5 py-4.5 text-[13.5px] font-medium tracking-[0.03em] text-tdd13-mut no-underline transition-colors duration-150 group-hover:text-tdd13-ink focus-visible:text-tdd13-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd13-ink">Stories &#9662;</a>
        <div class="pointer-events-none absolute top-full left-1/2 grid w-[min(580px,90vw)] -translate-x-1/2 -translate-y-2.5 grid-cols-[1.2fr_1fr] overflow-hidden rounded-b-2xl border border-t-0 border-tdd13-edge bg-white opacity-0 shadow-[0_24px_60px_oklch(0_0_0/0.13)] transition-[opacity,translate] duration-320 ease-tdd13 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100 max-sm:grid-cols-1 motion-reduce:duration-150">
          <div class="flex min-h-55 flex-col gap-2 bg-linear-[145deg,var(--color-tdd13-green1),var(--color-tdd13-green2)_50%,var(--color-tdd13-green3)] px-6 py-7">
            <p class="text-[10px] font-semibold uppercase tracking-[0.12em] text-white/50">From the Journal</p>
            <p class="font-tdd13-serif text-xl font-bold leading-tight text-white">The Art of Slow Fashion</p>
            <p class="mt-1 flex-1 text-[12.5px] leading-relaxed text-white/70 text-pretty">Conscious design for the discerning eye.</p>
            <a href="#read" class="mt-2 text-[12.5px] font-semibold tracking-[0.03em] text-white/85 no-underline transition-colors duration-150 hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Read Story &#8594;</a>
          </div>
          <div class="grid grid-cols-2 gap-6 px-5 py-6">
            <div class="flex flex-col gap-1">
              <p class="mb-1.5 border-b border-tdd13-edge pb-1.5 text-[10px] font-bold uppercase tracking-[0.1em] text-tdd13-mut">Editorials</p>
              <a href="#photography" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Photography</a>
              <a href="#film" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Film</a>
              <a href="#interviews" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Interviews</a>
            </div>
            <div class="flex flex-col gap-1">
              <p class="mb-1.5 border-b border-tdd13-edge pb-1.5 text-[10px] font-bold uppercase tracking-[0.1em] text-tdd13-mut">Craft</p>
              <a href="#materials" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Materials</a>
              <a href="#atelier" class="block py-1 text-[13px] font-medium text-tdd13-ink no-underline transition-colors duration-150 hover:text-tdd13-acc focus-visible:text-tdd13-acc focus-visible:outline-none">Atelier</a>
            </div>
          </div>
        </div>
      </div>
      <a href="#world" class="block px-3.5 py-4.5 text-[13.5px] font-medium tracking-[0.03em] text-tdd13-mut no-underline transition-colors duration-150 hover:text-tdd13-ink focus-visible:text-tdd13-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd13-ink">World</a>
      <a href="#services" class="block px-3.5 py-4.5 text-[13.5px] font-medium tracking-[0.03em] text-tdd13-mut no-underline transition-colors duration-150 hover:text-tdd13-ink focus-visible:text-tdd13-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd13-ink">Services</a>
    </div>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tdd13-bg: #f8f7f4;
  --color-tdd13-bg: oklch(0.97 0.005 95);
  --color-tdd13-ink: #1e293b;
  --color-tdd13-ink: oklch(0.28 0.03 260);
  --color-tdd13-mut: #64748b;
  --color-tdd13-mut: oklch(0.55 0.03 255);
  --color-tdd13-edge: #e2e8f0;
  --color-tdd13-edge: oklch(0.92 0.01 255);
  --color-tdd13-acc: #0ea5e9;
  --color-tdd13-acc: oklch(0.68 0.15 233);
  --color-tdd13-slate1: #1e293b;
  --color-tdd13-slate1: oklch(0.28 0.03 260);
  --color-tdd13-slate2: #334155;
  --color-tdd13-slate2: oklch(0.37 0.03 258);
  --color-tdd13-slate3: #475569;
  --color-tdd13-slate3: oklch(0.45 0.03 257);
  --color-tdd13-green1: #065f46;
  --color-tdd13-green1: oklch(0.42 0.1 165);
  --color-tdd13-green2: #047857;
  --color-tdd13-green2: oklch(0.49 0.12 165);
  --color-tdd13-green3: #10b981;
  --color-tdd13-green3: oklch(0.7 0.16 163);
  --font-tdd13-sans: 'Inter', system-ui, sans-serif;
  --font-tdd13-serif: 'Playfair Display', Georgia, serif;
  --ease-tdd13: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

How this works

The split is one utility. grid-cols-[1.2fr_1fr]; change the ratio and the whole editorial balance changes, with nothing else to update.

Variants without modifier classes. In CSS a second colourway meant .visual--green or an inline style; here the second panel simply carries a different gradient utility. That is the practical difference between a stylesheet of named variants and a markup that states its own appearance.

The billboard fills its column via flex flex-col with flex-1 on the description, which pushes the CTA to the bottom edge regardless of copy length.

Attached, not floating: the panel sits at top-full with no gap and square top corners, so it reads as an extension of the bar — which also means no hover bridge is needed.

Make it yours

  • Ratio: grid-cols-[2fr_1fr] for an image-dominant menu, [1fr_2fr] for a link-dominant one.
  • Real photography: replace the gradient div with an <img class=&quot;size-full object-cover&quot;>.
  • Column stagger: add group-hover:delay-75 to the links column so it lands after the billboard.
  • Minimum billboard height is min-h-55; raise it if your copy runs short and the column looks starved.

Gotchas — read before shipping

  • Wide panels overflow small viewports — the min() width clamp is required, not optional.
  • The billboard needs a minimum height or it collapses to its text and the split stops reading as a split.
  • A panel anchored under a narrow trigger drifts off-centre near the bar's edge; left-1/2 -translate-x-1/2 plus the clamp is the cheap fix, anchor-name is the future one.
  • Rounded bottom corners need overflow-hidden, or the gradient column squares them off.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

CSS Grid fraction tracks are universally supported.

Techniques used in this demo

Utilitiesfirst-class utility or variant

gridtw ↗transitionstw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →