20 Tailwind CSS Mega Menus
20 / 20

All 20 in 20 Tailwind CSS Mega Menus

  1. 01Tailwind CSS Mega Menu with Focus-Within (No JavaScript)
  2. 02Tailwind Mega Menu with Hover Intent Delay (No Flicker)
  3. 03Tailwind Mega Menu Safe Triangle (Diagonal Hover Fix)
  4. 04Tailwind CSS Grid Mega Menu with Subgrid Column Layout
  5. 05Tailwind Mega Menu Viewport Edge Positioning with Anchor Positioning
  6. 06Full-Width Tailwind Mega Menu Inside a Contained Header
  7. 07Accessible Tailwind Mega Menu with Escape Key and Focus Return
  8. 08Tailwind Mega Menu with Arrow Key Navigation Across Columns
  9. 09Accessible ARIA Disclosure Mega Menu in Tailwind CSS
  10. 10Mobile Tailwind Mega Menu for Touch Devices (Tap to Open)
  11. 11Screen Reader Friendly Tailwind Mega Menu with Panel Summaries
  12. 12Tailwind Mega Menu with One Shared Panel That Swaps Content
  13. 13Animated Tailwind Mega Menu with @starting-style and display Transitions
  14. 14Responsive Tailwind Mega Menu: How It Should Collapse on Mobile
  15. 15Editorial Tailwind Mega Menu with Featured Article Image
  16. 16Tailwind Dashboard Mega Menu with Live Status Panel
  17. 17Tailwind Mega Menu with Category Image Cards
  18. 18Tailwind E-commerce Department Store Mega Menu Grid
  19. 19Tailwind Product Finder Mega Menu with Live Filters
  20. 20Tailwind Promotional Mega Menu with Offer Banner
Pure TailwindMIT licensed

Tailwind Promotional Mega Menu with Offer Banner

A stationery shop whose mega panel gives a full third of its width to the offer: a solid amber block with an end-date pill, a one-line headline and a navy CTA, beside three link columns. Hard offset shadows tie the panel to the floating bar, and links pop in with an overshoot, alternate columns lagging for a ripple. Zero JavaScript.

Live Demo
Plain CSSTailwind v4
Try it

Nucleo: 44,000+ SVG icons in five families · All Icons Bundle $149

Nucleo · Affiliate link

Get the Nucleo bundle

The code

<section class="tmm-20 relative flow-root w-full min-h-svh bg-tmm20-bg font-tmm20-sans leading-[1.55] text-tmm20-ink [&_:focus-visible]:outline-2 [&_:focus-visible]:outline-offset-3 [&_:focus-visible]:outline-tmm20-ink" aria-labelledby="tmm20-title">
  <h2 class="sr-only" id="tmm20-title">Orbit Supply Co.</h2>

  <header class="relative z-10 mx-auto mt-[clamp(1rem,3vw,1.75rem)] w-[min(70rem,calc(100%-2rem))]">
    <div class="absolute top-[10px] right-2.5 z-60">
    <input class="peer absolute inset-0 m-0 size-full cursor-pointer opacity-0" type="checkbox" id="tmm20-theme">
    <label class="grid size-11 cursor-pointer place-items-center rounded-none border-2 border-tmm20-line bg-tmm20-surf text-tmm20-ink peer-focus-visible:outline-2 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tmm20-ink" for="tmm20-theme">
      <svg class="size-5" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M12 3.5a8.5 8.5 0 0 0 0 17Z" fill="currentColor"/></svg>
      <span class="sr-only">Toggle dark theme</span>
    </label>
  </div>
    <div class="flex min-h-17 flex-wrap items-stretch gap-x-[clamp(0.5rem,2vw,1.75rem)] border-2 border-tmm20-line bg-tmm20-surf pr-16 pl-[clamp(0.85rem,2vw,1.25rem)] max-[52rem]:flex-col max-[52rem]:py-2.5">
      <a class="grid content-center font-tmm20-display text-base/none font-bold tracking-[0.14em] text-tmm20-ink" href="#tmm20-title">ORBIT<span class="mt-0.5 font-tmm20-sans text-[0.6rem]/[1.3] font-normal tracking-[0.2em] text-tmm20-mut uppercase">supply co.</span></a>
      <nav class="flex min-w-0" aria-label="Primary">
        <ul class="flex flex-wrap gap-1 max-[52rem]:flex-col">
          <li data-tmm20-item class="flex items-stretch max-[52rem]:block">
            <button type="button" id="tmm20-trigger-shop" aria-expanded="false" aria-controls="tmm20-panel-shop" class="inline-flex min-h-11 cursor-pointer items-center gap-1.5 self-center px-3.5 font-tmm20-display text-[0.9rem]/none font-semibold tracking-[0.1em] text-tmm20-ink uppercase transition-colors hover:text-tmm20-mut tmm20-open:bg-tmm20-acc tmm20-open:text-tmm20-on-acc!">Shop<svg class="size-3.5 transition-transform duration-200 tmm20-open:rotate-180 motion-reduce:transition-none" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
            <div class="invisible absolute -inset-x-0.5 top-full z-30 grid border-2 border-tmm20-line bg-tmm20-surf opacity-0 shadow-[5px_5px_0_var(--color-tmm20-line)] pointer-events-none transition-[opacity,visibility] duration-160 min-[58rem]:grid-cols-[2fr_1fr] tmm20-open:visible tmm20-open:opacity-100 tmm20-open:pointer-events-auto motion-reduce:transition-none max-[52rem]:static max-[52rem]:mt-2 max-[52rem]:hidden max-[52rem]:visible max-[52rem]:opacity-100 max-[52rem]:tmm20-open:grid" id="tmm20-panel-shop" aria-labelledby="tmm20-trigger-shop">
              <div class="grid min-w-0 grid-cols-[repeat(auto-fit,minmax(min(100%,10rem),1fr))] gap-[clamp(0.75rem,2.4vw,1.75rem)] p-[clamp(1rem,2.8vw,1.6rem)]">
                <section class="min-w-0">
                  <h3 class="mb-1.5 border-b-2 border-tmm20-line pb-1.5 font-tmm20-display text-[0.86rem]/tight font-bold tracking-[0.12em] uppercase">Desk</h3>
                  <ul class="grid gap-px">
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-20 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Notebooks</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-52 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Pens and refills</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-84 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Desk mats</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-116 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Organisers</a></li>
                  </ul>
                </section>
                <section class="min-w-0">
                  <h3 class="mb-1.5 border-b-2 border-tmm20-line pb-1.5 font-tmm20-display text-[0.86rem]/tight font-bold tracking-[0.12em] uppercase">Carry</h3>
                  <ul class="grid gap-px">
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-100 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Backpacks</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-132 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Sleeves</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-164 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Pouches</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-196 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Travel sets</a></li>
                  </ul>
                </section>
                <section class="min-w-0">
                  <h3 class="mb-1.5 border-b-2 border-tmm20-line pb-1.5 font-tmm20-display text-[0.86rem]/tight font-bold tracking-[0.12em] uppercase">Gifting</h3>
                  <ul class="grid gap-px">
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-20 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Under &pound;40</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-52 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Bundles</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-84 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Gift cards</a></li>
                  </ul>
                </section>
              </div>
              <aside class="relative grid min-w-0 content-start gap-1.5 overflow-hidden bg-tmm20-acc p-[clamp(1rem,2.8vw,1.6rem)] text-tmm20-on-acc" aria-label="Autumn offer">
                <span aria-hidden="true" class="pointer-events-none absolute -right-8 -bottom-10 size-36 rounded-full border-[18px] border-tmm20-on-acc/10"></span>
                <p class="flex items-center justify-between gap-2 font-tmm20-display text-[0.7rem]/none font-bold tracking-[0.2em] uppercase">Autumn offer<span class="rounded-full bg-tmm20-on-acc px-2 py-1 text-[0.62rem] tracking-[0.12em] text-tmm20-acc">Ends Sunday</span></p>
                <p class="font-tmm20-display text-[clamp(1.15rem,3vw,1.45rem)]/[1.15] font-bold text-balance">Second notebook half price</p>
                <p class="text-[0.88rem] text-pretty">On every A5 dot-grid in the Meridian range. No code needed.</p>
                <a class="group/o mt-1.5 inline-flex min-h-11 w-fit items-center gap-2 bg-tmm20-on-acc px-4 font-tmm20-display text-[0.8rem]/none font-bold tracking-[0.12em] text-white uppercase transition-colors hover:bg-black" href="#tmm20-title">Shop the range<span aria-hidden="true" class="transition-transform group-hover/o:translate-x-0.5">&rarr;</span></a>
              </aside>
            </div>
          </li>
          <li data-tmm20-item class="flex items-stretch max-[52rem]:block">
            <button type="button" id="tmm20-trigger-new" aria-expanded="false" aria-controls="tmm20-panel-new" class="inline-flex min-h-11 cursor-pointer items-center gap-1.5 self-center px-3.5 font-tmm20-display text-[0.9rem]/none font-semibold tracking-[0.1em] text-tmm20-ink uppercase transition-colors hover:text-tmm20-mut tmm20-open:bg-tmm20-acc tmm20-open:text-tmm20-on-acc!">New in<svg class="size-3.5 transition-transform duration-200 tmm20-open:rotate-180 motion-reduce:transition-none" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
            <div class="invisible absolute -inset-x-0.5 top-full z-30 grid border-2 border-tmm20-line bg-tmm20-surf opacity-0 shadow-[5px_5px_0_var(--color-tmm20-line)] pointer-events-none transition-[opacity,visibility] duration-160 min-[58rem]:grid-cols-[2fr_1fr] tmm20-open:visible tmm20-open:opacity-100 tmm20-open:pointer-events-auto motion-reduce:transition-none max-[52rem]:static max-[52rem]:mt-2 max-[52rem]:hidden max-[52rem]:visible max-[52rem]:opacity-100 max-[52rem]:tmm20-open:grid" id="tmm20-panel-new" aria-labelledby="tmm20-trigger-new">
              <div class="grid min-w-0 grid-cols-[repeat(auto-fit,minmax(min(100%,10rem),1fr))] gap-[clamp(0.75rem,2.4vw,1.75rem)] p-[clamp(1rem,2.8vw,1.6rem)]">
                <section class="min-w-0">
                  <h3 class="mb-1.5 border-b-2 border-tmm20-line pb-1.5 font-tmm20-display text-[0.86rem]/tight font-bold tracking-[0.12em] uppercase">This season</h3>
                  <ul class="grid gap-px">
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-20 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Winter linen range</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-52 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Brass edition pens</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-84 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Archive reprints</a></li>
                  </ul>
                </section>
                <section class="min-w-0">
                  <h3 class="mb-1.5 border-b-2 border-tmm20-line pb-1.5 font-tmm20-display text-[0.86rem]/tight font-bold tracking-[0.12em] uppercase">Collaborations</h3>
                  <ul class="grid gap-px">
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-100 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Fern Studio</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-132 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Quill Press</a></li>
                  </ul>
                </section>
                <section class="min-w-0">
                  <h3 class="mb-1.5 border-b-2 border-tmm20-line pb-1.5 font-tmm20-display text-[0.86rem]/tight font-bold tracking-[0.12em] uppercase">Back in stock</h3>
                  <ul class="grid gap-px">
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-20 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">A5 dot grid</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-52 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Card wallet</a></li>
                  </ul>
                </section>
              </div>
              <aside class="relative grid min-w-0 content-start gap-1.5 overflow-hidden bg-tmm20-acc p-[clamp(1rem,2.8vw,1.6rem)] text-tmm20-on-acc" aria-label="Members offer">
                <span aria-hidden="true" class="pointer-events-none absolute -right-8 -bottom-10 size-36 rounded-full border-[18px] border-tmm20-on-acc/10"></span>
                <p class="flex items-center justify-between gap-2 font-tmm20-display text-[0.7rem]/none font-bold tracking-[0.2em] uppercase">Members</p>
                <p class="font-tmm20-display text-[clamp(1.15rem,3vw,1.45rem)]/[1.15] font-bold text-balance">Early access from Thursday</p>
                <p class="text-[0.88rem] text-pretty">Sign in to shop the winter range 48 hours before general release.</p>
                <a class="group/o mt-1.5 inline-flex min-h-11 w-fit items-center gap-2 bg-tmm20-on-acc px-4 font-tmm20-display text-[0.8rem]/none font-bold tracking-[0.12em] text-white uppercase transition-colors hover:bg-black" href="#tmm20-title">Sign in<span aria-hidden="true" class="transition-transform group-hover/o:translate-x-0.5">&rarr;</span></a>
              </aside>
            </div>
          </li>
          <li class="flex items-stretch"><a class="inline-flex min-h-11 items-center self-center px-3.5 font-tmm20-display text-[0.9rem]/none font-semibold tracking-[0.1em] text-tmm20-ink uppercase hover:text-tmm20-mut" href="#tmm20-title">Journal</a></li>
          <li class="flex items-stretch"><a class="inline-flex min-h-11 items-center self-center px-3.5 font-tmm20-display text-[0.9rem]/none font-semibold tracking-[0.1em] text-tmm20-ink uppercase hover:text-tmm20-mut" href="#tmm20-title">Stores</a></li>
        </ul>
      </nav>
      <a class="ml-auto inline-flex min-h-11 items-center gap-2 self-center px-3 font-tmm20-display text-[0.82rem]/none font-semibold tracking-[0.1em] text-tmm20-ink uppercase max-[52rem]:ml-0" href="#tmm20-title">
        <svg class="size-5" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 8h14l-1.2 11H6.2Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9 8a3 3 0 0 1 6 0" fill="none" stroke="currentColor" stroke-width="1.8"/></svg>
        Bag <span class="grid size-5 place-items-center rounded-full bg-tmm20-acc text-[0.7rem] text-tmm20-on-acc">2</span>
      </a>
    </div>
  </header>

  <main class="mx-auto w-[min(70rem,calc(100%-2rem))] py-[clamp(3rem,9vw,5.5rem)]">
    <div class="grid max-w-[34rem] gap-2.5">
      <p class="font-tmm20-display text-[0.72rem]/none font-bold tracking-[0.22em] text-tmm20-mut uppercase">Made in Britain since 2009</p>
      <h1 class="font-tmm20-display text-[clamp(2.2rem,7vw,3.8rem)]/[1.02] font-bold tracking-[-0.02em] text-balance">Paper worth writing on.</h1>
      <p class="text-[clamp(0.95rem,2.3vw,1.1rem)] text-tmm20-mut">120gsm, fountain-pen friendly, bound to lie flat.</p>
      <a class="mt-1.5 inline-flex min-h-12 w-fit items-center gap-2 border-2 border-tmm20-line bg-tmm20-acc px-5.5 font-tmm20-display text-[0.85rem]/none font-bold tracking-[0.14em] text-tmm20-on-acc uppercase shadow-[5px_5px_0_var(--color-tmm20-line)] transition-[translate,box-shadow] hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[3px_3px_0_var(--color-tmm20-line)] active:translate-x-[5px] active:translate-y-[5px] active:shadow-none" href="#tmm20-title">Shop notebooks <span aria-hidden="true">&rarr;</span></a>
    </div>
  </main>
</section>
@import "tailwindcss";

@theme {
  --color-tmm20-bg: #eef2f8;
  --color-tmm20-bg: oklch(0.96 0.01 255);
  --color-tmm20-surf: #ffffff;
  --color-tmm20-surf: oklch(1 0 0);
  --color-tmm20-line: #10213f;
  --color-tmm20-line: oklch(0.25 0.06 260);
  --color-tmm20-ink: #10213f;
  --color-tmm20-ink: oklch(0.25 0.06 260);
  --color-tmm20-mut: #4f5f82;
  --color-tmm20-mut: oklch(0.48 0.05 262);
  --color-tmm20-acc: #f0a202;
  --color-tmm20-acc: oklch(0.78 0.16 78);
  --color-tmm20-on-acc: #10213f;
  --color-tmm20-on-acc: oklch(0.25 0.06 260);
  --font-tmm20-display: 'Jost', Futura, 'Century Gothic', sans-serif;
  --font-tmm20-sans: 'Jost', system-ui, sans-serif;
  --ease-tmm20-pop: cubic-bezier(0.34, 1.6, 0.64, 1);
}
/* The open state as ONE variant: focus-within or a scripted [data-open], hover only where hover exists.
   Every panel, chevron and entry utility reads tmm20-open: instead of a repeated selector list. */

@custom-variant tmm20-open {
  &:where([data-tmm20-item]:is(:focus-within, [data-open]) *) {
    @slot;
  }

  @media (hover: hover) {
    &:where([data-tmm20-item]:hover *) {
      @slot;
    }
  }
}
/* Root rule: the full-bleed contract, sized before the browser build compiles. */

.tmm-20 {
  width: 100%;
  min-height: 100svh;
}
/* Theme toggle: the checkbox flips the token set; the OS preference flips the default. */

.tmm-20:has(#tmm20-theme:checked) {
  --color-tmm20-bg: #060b16;
  --color-tmm20-bg: oklch(0.15 0.025 262);
  --color-tmm20-surf: #0d1626;
  --color-tmm20-surf: oklch(0.2 0.035 262);
  --color-tmm20-line: #5d7398;
  --color-tmm20-line: oklch(0.56 0.06 262);
  --color-tmm20-ink: #eaf0f9;
  --color-tmm20-ink: oklch(0.95 0.012 255);
  --color-tmm20-mut: #93a5c2;
  --color-tmm20-mut: oklch(0.72 0.04 260);
  --color-tmm20-acc: #fbbf24;
  --color-tmm20-acc: oklch(0.83 0.15 80);
  --color-tmm20-on-acc: #10213f;
  --color-tmm20-on-acc: oklch(0.25 0.06 260);
}

@media (prefers-color-scheme: dark) {
  .tmm-20 {
    --color-tmm20-bg: #060b16;
    --color-tmm20-bg: oklch(0.15 0.025 262);
    --color-tmm20-surf: #0d1626;
    --color-tmm20-surf: oklch(0.2 0.035 262);
    --color-tmm20-line: #5d7398;
    --color-tmm20-line: oklch(0.56 0.06 262);
    --color-tmm20-ink: #eaf0f9;
    --color-tmm20-ink: oklch(0.95 0.012 255);
    --color-tmm20-mut: #93a5c2;
    --color-tmm20-mut: oklch(0.72 0.04 260);
    --color-tmm20-acc: #fbbf24;
    --color-tmm20-acc: oklch(0.83 0.15 80);
    --color-tmm20-on-acc: #10213f;
    --color-tmm20-on-acc: oklch(0.25 0.06 260);
  }

  .tmm-20:has(#tmm20-theme:checked) {
    --color-tmm20-bg: #eef2f8;
    --color-tmm20-bg: oklch(0.96 0.01 255);
    --color-tmm20-surf: #ffffff;
    --color-tmm20-surf: oklch(1 0 0);
    --color-tmm20-line: #10213f;
    --color-tmm20-line: oklch(0.25 0.06 260);
    --color-tmm20-ink: #10213f;
    --color-tmm20-ink: oklch(0.25 0.06 260);
    --color-tmm20-mut: #4f5f82;
    --color-tmm20-mut: oklch(0.48 0.05 262);
    --color-tmm20-acc: #f0a202;
    --color-tmm20-acc: oklch(0.78 0.16 78);
    --color-tmm20-on-acc: #10213f;
    --color-tmm20-on-acc: oklch(0.25 0.06 260);
  }
}

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-tmm20-bg: #eef2f8;
  --color-tmm20-bg: oklch(0.96 0.01 255);
  --color-tmm20-surf: #ffffff;
  --color-tmm20-surf: oklch(1 0 0);
  --color-tmm20-line: #10213f;
  --color-tmm20-line: oklch(0.25 0.06 260);
  --color-tmm20-ink: #10213f;
  --color-tmm20-ink: oklch(0.25 0.06 260);
  --color-tmm20-mut: #4f5f82;
  --color-tmm20-mut: oklch(0.48 0.05 262);
  --color-tmm20-acc: #f0a202;
  --color-tmm20-acc: oklch(0.78 0.16 78);
  --color-tmm20-on-acc: #10213f;
  --color-tmm20-on-acc: oklch(0.25 0.06 260);
  --font-tmm20-display: 'Jost', Futura, 'Century Gothic', sans-serif;
  --font-tmm20-sans: 'Jost', system-ui, sans-serif;
  --ease-tmm20-pop: cubic-bezier(0.34, 1.6, 0.64, 1);
}
/* The open state as ONE variant: focus-within or a scripted [data-open], hover only where hover exists.
   Every panel, chevron and entry utility reads tmm20-open: instead of a repeated selector list. */

@custom-variant tmm20-open {
  &:where([data-tmm20-item]:is(:focus-within, [data-open]) *) {
    @slot;
  }

  @media (hover: hover) {
    &:where([data-tmm20-item]:hover *) {
      @slot;
    }
  }
}
/* Root rule: the full-bleed contract, sized before the browser build compiles. */

.tmm-20 {
  width: 100%;
  min-height: 100svh;
}
/* Theme toggle: the checkbox flips the token set; the OS preference flips the default. */

.tmm-20:has(#tmm20-theme:checked) {
  --color-tmm20-bg: #060b16;
  --color-tmm20-bg: oklch(0.15 0.025 262);
  --color-tmm20-surf: #0d1626;
  --color-tmm20-surf: oklch(0.2 0.035 262);
  --color-tmm20-line: #5d7398;
  --color-tmm20-line: oklch(0.56 0.06 262);
  --color-tmm20-ink: #eaf0f9;
  --color-tmm20-ink: oklch(0.95 0.012 255);
  --color-tmm20-mut: #93a5c2;
  --color-tmm20-mut: oklch(0.72 0.04 260);
  --color-tmm20-acc: #fbbf24;
  --color-tmm20-acc: oklch(0.83 0.15 80);
  --color-tmm20-on-acc: #10213f;
  --color-tmm20-on-acc: oklch(0.25 0.06 260);
}

@media (prefers-color-scheme: dark) {
  .tmm-20 {
    --color-tmm20-bg: #060b16;
    --color-tmm20-bg: oklch(0.15 0.025 262);
    --color-tmm20-surf: #0d1626;
    --color-tmm20-surf: oklch(0.2 0.035 262);
    --color-tmm20-line: #5d7398;
    --color-tmm20-line: oklch(0.56 0.06 262);
    --color-tmm20-ink: #eaf0f9;
    --color-tmm20-ink: oklch(0.95 0.012 255);
    --color-tmm20-mut: #93a5c2;
    --color-tmm20-mut: oklch(0.72 0.04 260);
    --color-tmm20-acc: #fbbf24;
    --color-tmm20-acc: oklch(0.83 0.15 80);
    --color-tmm20-on-acc: #10213f;
    --color-tmm20-on-acc: oklch(0.25 0.06 260);
  }

  .tmm-20:has(#tmm20-theme:checked) {
    --color-tmm20-bg: #eef2f8;
    --color-tmm20-bg: oklch(0.96 0.01 255);
    --color-tmm20-surf: #ffffff;
    --color-tmm20-surf: oklch(1 0 0);
    --color-tmm20-line: #10213f;
    --color-tmm20-line: oklch(0.25 0.06 260);
    --color-tmm20-ink: #10213f;
    --color-tmm20-ink: oklch(0.25 0.06 260);
    --color-tmm20-mut: #4f5f82;
    --color-tmm20-mut: oklch(0.48 0.05 262);
    --color-tmm20-acc: #f0a202;
    --color-tmm20-acc: oklch(0.78 0.16 78);
    --color-tmm20-on-acc: #10213f;
    --color-tmm20-on-acc: oklch(0.25 0.06 260);
  }
}
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=Jost:wght@400;500;600;700&display=swap">

What changed in the port

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

  • --mm-20-offset became literal shadow-[5px_5px_0_…]; the hard-coded #10213f on-amber ink became a theme token so dark mode stays readable.
  • Bug fix: the trigger only highlighted on :focus-within; hover now matches. Stray .mm-20__sub li selectors that matched nothing were removed.
  • UI upgrade: an end-date pill on the offer, a decorative ring for depth, chevrons on triggers, an arrowed offer CTA, and a hero CTA that presses into its shadow; Jost replaces Futura fallbacks.
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 Promotional Mega Menu with Offer Banner
Source: https://codefronts.com/navigation/tailwind-css-mega-menus/tailwind-promotional-mega-menu-offer-banner/

A stationery shop whose mega panel gives a full third of its width to the offer: a solid amber block with an end-date pill, a one-line headline and a navy CTA, beside three link columns. Hard offset shadows tie the panel to the floating bar, and links pop in with an overshoot, alternate columns lagging for a ripple. Zero JavaScript.
## HTML
```html
<section class="tmm-20 relative flow-root w-full min-h-svh bg-tmm20-bg font-tmm20-sans leading-[1.55] text-tmm20-ink [&_:focus-visible]:outline-2 [&_:focus-visible]:outline-offset-3 [&_:focus-visible]:outline-tmm20-ink" aria-labelledby="tmm20-title">
  <h2 class="sr-only" id="tmm20-title">Orbit Supply Co.</h2>

  <header class="relative z-10 mx-auto mt-[clamp(1rem,3vw,1.75rem)] w-[min(70rem,calc(100%-2rem))]">
    <div class="absolute top-[10px] right-2.5 z-60">
    <input class="peer absolute inset-0 m-0 size-full cursor-pointer opacity-0" type="checkbox" id="tmm20-theme">
    <label class="grid size-11 cursor-pointer place-items-center rounded-none border-2 border-tmm20-line bg-tmm20-surf text-tmm20-ink peer-focus-visible:outline-2 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tmm20-ink" for="tmm20-theme">
      <svg class="size-5" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M12 3.5a8.5 8.5 0 0 0 0 17Z" fill="currentColor"/></svg>
      <span class="sr-only">Toggle dark theme</span>
    </label>
  </div>
    <div class="flex min-h-17 flex-wrap items-stretch gap-x-[clamp(0.5rem,2vw,1.75rem)] border-2 border-tmm20-line bg-tmm20-surf pr-16 pl-[clamp(0.85rem,2vw,1.25rem)] max-[52rem]:flex-col max-[52rem]:py-2.5">
      <a class="grid content-center font-tmm20-display text-base/none font-bold tracking-[0.14em] text-tmm20-ink" href="#tmm20-title">ORBIT<span class="mt-0.5 font-tmm20-sans text-[0.6rem]/[1.3] font-normal tracking-[0.2em] text-tmm20-mut uppercase">supply co.</span></a>
      <nav class="flex min-w-0" aria-label="Primary">
        <ul class="flex flex-wrap gap-1 max-[52rem]:flex-col">
          <li data-tmm20-item class="flex items-stretch max-[52rem]:block">
            <button type="button" id="tmm20-trigger-shop" aria-expanded="false" aria-controls="tmm20-panel-shop" class="inline-flex min-h-11 cursor-pointer items-center gap-1.5 self-center px-3.5 font-tmm20-display text-[0.9rem]/none font-semibold tracking-[0.1em] text-tmm20-ink uppercase transition-colors hover:text-tmm20-mut tmm20-open:bg-tmm20-acc tmm20-open:text-tmm20-on-acc!">Shop<svg class="size-3.5 transition-transform duration-200 tmm20-open:rotate-180 motion-reduce:transition-none" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
            <div class="invisible absolute -inset-x-0.5 top-full z-30 grid border-2 border-tmm20-line bg-tmm20-surf opacity-0 shadow-[5px_5px_0_var(--color-tmm20-line)] pointer-events-none transition-[opacity,visibility] duration-160 min-[58rem]:grid-cols-[2fr_1fr] tmm20-open:visible tmm20-open:opacity-100 tmm20-open:pointer-events-auto motion-reduce:transition-none max-[52rem]:static max-[52rem]:mt-2 max-[52rem]:hidden max-[52rem]:visible max-[52rem]:opacity-100 max-[52rem]:tmm20-open:grid" id="tmm20-panel-shop" aria-labelledby="tmm20-trigger-shop">
              <div class="grid min-w-0 grid-cols-[repeat(auto-fit,minmax(min(100%,10rem),1fr))] gap-[clamp(0.75rem,2.4vw,1.75rem)] p-[clamp(1rem,2.8vw,1.6rem)]">
                <section class="min-w-0">
                  <h3 class="mb-1.5 border-b-2 border-tmm20-line pb-1.5 font-tmm20-display text-[0.86rem]/tight font-bold tracking-[0.12em] uppercase">Desk</h3>
                  <ul class="grid gap-px">
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-20 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Notebooks</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-52 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Pens and refills</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-84 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Desk mats</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-116 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Organisers</a></li>
                  </ul>
                </section>
                <section class="min-w-0">
                  <h3 class="mb-1.5 border-b-2 border-tmm20-line pb-1.5 font-tmm20-display text-[0.86rem]/tight font-bold tracking-[0.12em] uppercase">Carry</h3>
                  <ul class="grid gap-px">
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-100 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Backpacks</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-132 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Sleeves</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-164 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Pouches</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-196 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Travel sets</a></li>
                  </ul>
                </section>
                <section class="min-w-0">
                  <h3 class="mb-1.5 border-b-2 border-tmm20-line pb-1.5 font-tmm20-display text-[0.86rem]/tight font-bold tracking-[0.12em] uppercase">Gifting</h3>
                  <ul class="grid gap-px">
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-20 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Under &pound;40</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-52 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Bundles</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-84 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Gift cards</a></li>
                  </ul>
                </section>
              </div>
              <aside class="relative grid min-w-0 content-start gap-1.5 overflow-hidden bg-tmm20-acc p-[clamp(1rem,2.8vw,1.6rem)] text-tmm20-on-acc" aria-label="Autumn offer">
                <span aria-hidden="true" class="pointer-events-none absolute -right-8 -bottom-10 size-36 rounded-full border-[18px] border-tmm20-on-acc/10"></span>
                <p class="flex items-center justify-between gap-2 font-tmm20-display text-[0.7rem]/none font-bold tracking-[0.2em] uppercase">Autumn offer<span class="rounded-full bg-tmm20-on-acc px-2 py-1 text-[0.62rem] tracking-[0.12em] text-tmm20-acc">Ends Sunday</span></p>
                <p class="font-tmm20-display text-[clamp(1.15rem,3vw,1.45rem)]/[1.15] font-bold text-balance">Second notebook half price</p>
                <p class="text-[0.88rem] text-pretty">On every A5 dot-grid in the Meridian range. No code needed.</p>
                <a class="group/o mt-1.5 inline-flex min-h-11 w-fit items-center gap-2 bg-tmm20-on-acc px-4 font-tmm20-display text-[0.8rem]/none font-bold tracking-[0.12em] text-white uppercase transition-colors hover:bg-black" href="#tmm20-title">Shop the range<span aria-hidden="true" class="transition-transform group-hover/o:translate-x-0.5">&rarr;</span></a>
              </aside>
            </div>
          </li>
          <li data-tmm20-item class="flex items-stretch max-[52rem]:block">
            <button type="button" id="tmm20-trigger-new" aria-expanded="false" aria-controls="tmm20-panel-new" class="inline-flex min-h-11 cursor-pointer items-center gap-1.5 self-center px-3.5 font-tmm20-display text-[0.9rem]/none font-semibold tracking-[0.1em] text-tmm20-ink uppercase transition-colors hover:text-tmm20-mut tmm20-open:bg-tmm20-acc tmm20-open:text-tmm20-on-acc!">New in<svg class="size-3.5 transition-transform duration-200 tmm20-open:rotate-180 motion-reduce:transition-none" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
            <div class="invisible absolute -inset-x-0.5 top-full z-30 grid border-2 border-tmm20-line bg-tmm20-surf opacity-0 shadow-[5px_5px_0_var(--color-tmm20-line)] pointer-events-none transition-[opacity,visibility] duration-160 min-[58rem]:grid-cols-[2fr_1fr] tmm20-open:visible tmm20-open:opacity-100 tmm20-open:pointer-events-auto motion-reduce:transition-none max-[52rem]:static max-[52rem]:mt-2 max-[52rem]:hidden max-[52rem]:visible max-[52rem]:opacity-100 max-[52rem]:tmm20-open:grid" id="tmm20-panel-new" aria-labelledby="tmm20-trigger-new">
              <div class="grid min-w-0 grid-cols-[repeat(auto-fit,minmax(min(100%,10rem),1fr))] gap-[clamp(0.75rem,2.4vw,1.75rem)] p-[clamp(1rem,2.8vw,1.6rem)]">
                <section class="min-w-0">
                  <h3 class="mb-1.5 border-b-2 border-tmm20-line pb-1.5 font-tmm20-display text-[0.86rem]/tight font-bold tracking-[0.12em] uppercase">This season</h3>
                  <ul class="grid gap-px">
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-20 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Winter linen range</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-52 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Brass edition pens</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-84 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Archive reprints</a></li>
                  </ul>
                </section>
                <section class="min-w-0">
                  <h3 class="mb-1.5 border-b-2 border-tmm20-line pb-1.5 font-tmm20-display text-[0.86rem]/tight font-bold tracking-[0.12em] uppercase">Collaborations</h3>
                  <ul class="grid gap-px">
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-100 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Fern Studio</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-132 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Quill Press</a></li>
                  </ul>
                </section>
                <section class="min-w-0">
                  <h3 class="mb-1.5 border-b-2 border-tmm20-line pb-1.5 font-tmm20-display text-[0.86rem]/tight font-bold tracking-[0.12em] uppercase">Back in stock</h3>
                  <ul class="grid gap-px">
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-20 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">A5 dot grid</a></li>
                    <li class="origin-left scale-[0.86] opacity-0 transition-[opacity,scale] duration-[140ms,400ms] ease-tmm20-pop delay-52 tmm20-open:scale-100 tmm20-open:opacity-100 motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none"><a href="#tmm20-title" class="flex min-h-11 min-w-0 items-center text-[0.92rem] text-tmm20-ink decoration-2 underline-offset-4 hover:underline">Card wallet</a></li>
                  </ul>
                </section>
              </div>
              <aside class="relative grid min-w-0 content-start gap-1.5 overflow-hidden bg-tmm20-acc p-[clamp(1rem,2.8vw,1.6rem)] text-tmm20-on-acc" aria-label="Members offer">
                <span aria-hidden="true" class="pointer-events-none absolute -right-8 -bottom-10 size-36 rounded-full border-[18px] border-tmm20-on-acc/10"></span>
                <p class="flex items-center justify-between gap-2 font-tmm20-display text-[0.7rem]/none font-bold tracking-[0.2em] uppercase">Members</p>
                <p class="font-tmm20-display text-[clamp(1.15rem,3vw,1.45rem)]/[1.15] font-bold text-balance">Early access from Thursday</p>
                <p class="text-[0.88rem] text-pretty">Sign in to shop the winter range 48 hours before general release.</p>
                <a class="group/o mt-1.5 inline-flex min-h-11 w-fit items-center gap-2 bg-tmm20-on-acc px-4 font-tmm20-display text-[0.8rem]/none font-bold tracking-[0.12em] text-white uppercase transition-colors hover:bg-black" href="#tmm20-title">Sign in<span aria-hidden="true" class="transition-transform group-hover/o:translate-x-0.5">&rarr;</span></a>
              </aside>
            </div>
          </li>
          <li class="flex items-stretch"><a class="inline-flex min-h-11 items-center self-center px-3.5 font-tmm20-display text-[0.9rem]/none font-semibold tracking-[0.1em] text-tmm20-ink uppercase hover:text-tmm20-mut" href="#tmm20-title">Journal</a></li>
          <li class="flex items-stretch"><a class="inline-flex min-h-11 items-center self-center px-3.5 font-tmm20-display text-[0.9rem]/none font-semibold tracking-[0.1em] text-tmm20-ink uppercase hover:text-tmm20-mut" href="#tmm20-title">Stores</a></li>
        </ul>
      </nav>
      <a class="ml-auto inline-flex min-h-11 items-center gap-2 self-center px-3 font-tmm20-display text-[0.82rem]/none font-semibold tracking-[0.1em] text-tmm20-ink uppercase max-[52rem]:ml-0" href="#tmm20-title">
        <svg class="size-5" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 8h14l-1.2 11H6.2Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9 8a3 3 0 0 1 6 0" fill="none" stroke="currentColor" stroke-width="1.8"/></svg>
        Bag <span class="grid size-5 place-items-center rounded-full bg-tmm20-acc text-[0.7rem] text-tmm20-on-acc">2</span>
      </a>
    </div>
  </header>

  <main class="mx-auto w-[min(70rem,calc(100%-2rem))] py-[clamp(3rem,9vw,5.5rem)]">
    <div class="grid max-w-[34rem] gap-2.5">
      <p class="font-tmm20-display text-[0.72rem]/none font-bold tracking-[0.22em] text-tmm20-mut uppercase">Made in Britain since 2009</p>
      <h1 class="font-tmm20-display text-[clamp(2.2rem,7vw,3.8rem)]/[1.02] font-bold tracking-[-0.02em] text-balance">Paper worth writing on.</h1>
      <p class="text-[clamp(0.95rem,2.3vw,1.1rem)] text-tmm20-mut">120gsm, fountain-pen friendly, bound to lie flat.</p>
      <a class="mt-1.5 inline-flex min-h-12 w-fit items-center gap-2 border-2 border-tmm20-line bg-tmm20-acc px-5.5 font-tmm20-display text-[0.85rem]/none font-bold tracking-[0.14em] text-tmm20-on-acc uppercase shadow-[5px_5px_0_var(--color-tmm20-line)] transition-[translate,box-shadow] hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[3px_3px_0_var(--color-tmm20-line)] active:translate-x-[5px] active:translate-y-[5px] active:shadow-none" href="#tmm20-title">Shop notebooks <span aria-hidden="true">&rarr;</span></a>
    </div>
  </main>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tmm20-bg: #eef2f8;
  --color-tmm20-bg: oklch(0.96 0.01 255);
  --color-tmm20-surf: #ffffff;
  --color-tmm20-surf: oklch(1 0 0);
  --color-tmm20-line: #10213f;
  --color-tmm20-line: oklch(0.25 0.06 260);
  --color-tmm20-ink: #10213f;
  --color-tmm20-ink: oklch(0.25 0.06 260);
  --color-tmm20-mut: #4f5f82;
  --color-tmm20-mut: oklch(0.48 0.05 262);
  --color-tmm20-acc: #f0a202;
  --color-tmm20-acc: oklch(0.78 0.16 78);
  --color-tmm20-on-acc: #10213f;
  --color-tmm20-on-acc: oklch(0.25 0.06 260);
  --font-tmm20-display: 'Jost', Futura, 'Century Gothic', sans-serif;
  --font-tmm20-sans: 'Jost', system-ui, sans-serif;
  --ease-tmm20-pop: cubic-bezier(0.34, 1.6, 0.64, 1);
}
/* The open state as ONE variant: focus-within or a scripted [data-open], hover only where hover exists.
   Every panel, chevron and entry utility reads tmm20-open: instead of a repeated selector list. */

@custom-variant tmm20-open {
  &:where([data-tmm20-item]:is(:focus-within, [data-open]) *) {
    @slot;
  }

  @media (hover: hover) {
    &:where([data-tmm20-item]:hover *) {
      @slot;
    }
  }
}
/* Root rule: the full-bleed contract, sized before the browser build compiles. */

.tmm-20 {
  width: 100%;
  min-height: 100svh;
}
/* Theme toggle: the checkbox flips the token set; the OS preference flips the default. */

.tmm-20:has(#tmm20-theme:checked) {
  --color-tmm20-bg: #060b16;
  --color-tmm20-bg: oklch(0.15 0.025 262);
  --color-tmm20-surf: #0d1626;
  --color-tmm20-surf: oklch(0.2 0.035 262);
  --color-tmm20-line: #5d7398;
  --color-tmm20-line: oklch(0.56 0.06 262);
  --color-tmm20-ink: #eaf0f9;
  --color-tmm20-ink: oklch(0.95 0.012 255);
  --color-tmm20-mut: #93a5c2;
  --color-tmm20-mut: oklch(0.72 0.04 260);
  --color-tmm20-acc: #fbbf24;
  --color-tmm20-acc: oklch(0.83 0.15 80);
  --color-tmm20-on-acc: #10213f;
  --color-tmm20-on-acc: oklch(0.25 0.06 260);
}

@media (prefers-color-scheme: dark) {
  .tmm-20 {
    --color-tmm20-bg: #060b16;
    --color-tmm20-bg: oklch(0.15 0.025 262);
    --color-tmm20-surf: #0d1626;
    --color-tmm20-surf: oklch(0.2 0.035 262);
    --color-tmm20-line: #5d7398;
    --color-tmm20-line: oklch(0.56 0.06 262);
    --color-tmm20-ink: #eaf0f9;
    --color-tmm20-ink: oklch(0.95 0.012 255);
    --color-tmm20-mut: #93a5c2;
    --color-tmm20-mut: oklch(0.72 0.04 260);
    --color-tmm20-acc: #fbbf24;
    --color-tmm20-acc: oklch(0.83 0.15 80);
    --color-tmm20-on-acc: #10213f;
    --color-tmm20-on-acc: oklch(0.25 0.06 260);
  }

  .tmm-20:has(#tmm20-theme:checked) {
    --color-tmm20-bg: #eef2f8;
    --color-tmm20-bg: oklch(0.96 0.01 255);
    --color-tmm20-surf: #ffffff;
    --color-tmm20-surf: oklch(1 0 0);
    --color-tmm20-line: #10213f;
    --color-tmm20-line: oklch(0.25 0.06 260);
    --color-tmm20-ink: #10213f;
    --color-tmm20-ink: oklch(0.25 0.06 260);
    --color-tmm20-mut: #4f5f82;
    --color-tmm20-mut: oklch(0.48 0.05 262);
    --color-tmm20-acc: #f0a202;
    --color-tmm20-acc: oklch(0.78 0.16 78);
    --color-tmm20-on-acc: #10213f;
    --color-tmm20-on-acc: oklch(0.25 0.06 260);
  }
}
```

How this works

Promotions belong in the panel, not over the page. A banner bar above the header is ignored; an offer inside the panel the user just opened is in their line of sight at the moment of intent. Giving it a fixed share of the grid keeps it from crowding the links.

One accent, used once. Amber appears on the active trigger, the offer block and the bag count — the three places the business wants eyes — and nowhere else.

A ripple from two delays. Each list staggers its own rows, and every second column adds 80ms, so the pop travels diagonally across the panel.

Make it yours

  • Offer on the left: reverse the template to grid-cols-[1fr_2fr] and move the <aside> first.
  • Quieter offer: swap bg-tmm20-acc for bg-tmm20-acc/15 and keep ink text.
  • No end date: omit the pill; the header row collapses.

Gotchas — read before shipping

  • Keep promotional copy factual and dated — stale offers in navigation erode trust faster than anywhere else.
  • The offer is an <aside aria-label> so screen readers can skip it.
  • Overshoot curves feel playful at 400ms; above 500ms they start to feel sluggish.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Tailwind v4 floor (cascade layers, @property, color-mix()). Individual scale property: Chrome 104+, Safari 14.1+, Firefox 72+.

Techniques used in this demo

Utilitiesfirst-class utility or variant

box-shadowtw ↗pseudo elementstw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →