22 Tailwind Dropdown Menus
04 / 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 Elastic Bounce Dropdown Menu

The springy one: the panel snaps open on scale-y with an overshoot curve, so it briefly overshoots its own height and settles. Porting it is mostly about the easing token — an overshoot curve is a design decision, so it belongs in @theme as --ease-tdd04, not inline as an arbitrary value.

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-04 w-full min-h-svh grid justify-center content-start bg-linear-[135deg,var(--color-tdd04-bg1),var(--color-tdd04-bg2),var(--color-tdd04-bg3)] font-tdd04-sans text-tdd04-ink px-5 py-8" aria-label="Elastic bounce dropdown demo">
  <nav class="relative z-10 flex items-center gap-2 rounded-full bg-white py-2 pr-2 pl-6 shadow-[0_4px_24px_oklch(0.65_0.2_350/0.15)]" aria-label="Primary">
    <span class="mr-2 text-base font-bold tracking-[-0.3px] text-tdd04-acc">&#9670; Bounce</span>
    <div class="flex gap-0.5">
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2.5 after:content-['']">
        <a href="#explore" class="flex items-center gap-1 rounded-full px-4 py-2 text-sm font-semibold text-tdd04-ink no-underline transition-colors duration-150 group-hover:bg-tdd04-tint group-hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd04-acc">Explore &#9662;</a>
        <div class="pointer-events-none absolute top-[calc(100%+10px)] left-1/2 flex min-w-48 -translate-x-1/2 scale-y-0 origin-top flex-col gap-0.5 rounded-2xl border border-tdd04-acc/12 bg-white p-2 opacity-0 shadow-[0_12px_40px_oklch(0.65_0.2_350/0.18)] transition-[scale,opacity] duration-500 ease-tdd04 group-hover:pointer-events-auto group-hover:scale-y-100 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:scale-y-100 group-focus-within:opacity-100 motion-reduce:duration-150">
          <a href="#featured" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#127775; Featured</a>
          <a href="#trending" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#128293; Trending</a>
          <a href="#new" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#128640; New Arrivals</a>
          <a href="#top" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#127942; Top Rated</a>
          <div class="my-1 h-px bg-tdd04-edge" aria-hidden="true"></div>
          <a href="#all" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-bold text-tdd04-acc no-underline transition-colors duration-150 hover:bg-tdd04-tint focus-visible:bg-tdd04-tint focus-visible:outline-none">View All &#8594;</a>
        </div>
      </div>
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2.5 after:content-['']">
        <a href="#learn" class="flex items-center gap-1 rounded-full px-4 py-2 text-sm font-semibold text-tdd04-ink no-underline transition-colors duration-150 group-hover:bg-tdd04-tint group-hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd04-acc">Learn &#9662;</a>
        <div class="pointer-events-none absolute top-[calc(100%+10px)] left-1/2 flex min-w-48 -translate-x-1/2 scale-y-0 origin-top flex-col gap-0.5 rounded-2xl border border-tdd04-acc/12 bg-white p-2 opacity-0 shadow-[0_12px_40px_oklch(0.65_0.2_350/0.18)] transition-[scale,opacity] duration-500 ease-tdd04 group-hover:pointer-events-auto group-hover:scale-y-100 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:scale-y-100 group-focus-within:opacity-100 motion-reduce:duration-150">
          <a href="#tutorials" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#128218; Tutorials</a>
          <a href="#courses" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#127916; Video Courses</a>
          <a href="#workshops" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#127881; Workshops</a>
        </div>
      </div>
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2.5 after:content-['']">
        <a href="#connect" class="flex items-center gap-1 rounded-full px-4 py-2 text-sm font-semibold text-tdd04-ink no-underline transition-colors duration-150 group-hover:bg-tdd04-tint group-hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd04-acc">Connect &#9662;</a>
        <div class="pointer-events-none absolute top-[calc(100%+10px)] left-1/2 flex min-w-48 -translate-x-1/2 scale-y-0 origin-top flex-col gap-0.5 rounded-2xl border border-tdd04-acc/12 bg-white p-2 opacity-0 shadow-[0_12px_40px_oklch(0.65_0.2_350/0.18)] transition-[scale,opacity] duration-500 ease-tdd04 group-hover:pointer-events-auto group-hover:scale-y-100 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:scale-y-100 group-focus-within:opacity-100 motion-reduce:duration-150">
          <a href="#community" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#128172; Community</a>
          <a href="#forum" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#128101; Forum</a>
          <a href="#newsletter" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#128236; Newsletter</a>
        </div>
      </div>
    </div>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tdd04-bg1: #fdf2f8;
  --color-tdd04-bg1: oklch(0.97 0.02 350);
  --color-tdd04-bg2: #fce7f3;
  --color-tdd04-bg2: oklch(0.94 0.04 350);
  --color-tdd04-bg3: #ede9fe;
  --color-tdd04-bg3: oklch(0.94 0.03 295);
  --color-tdd04-ink: #1e1b4b;
  --color-tdd04-ink: oklch(0.26 0.08 285);
  --color-tdd04-edge: #f3f4f6;
  --color-tdd04-edge: oklch(0.96 0.003 265);
  --color-tdd04-tint: #fdf2f8;
  --color-tdd04-tint: oklch(0.97 0.02 350);
  --color-tdd04-acc: #ec4899;
  --color-tdd04-acc: oklch(0.65 0.2 350);
  --font-tdd04-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ease-tdd04: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

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

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

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

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

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

@theme {
  --color-tdd04-bg1: #fdf2f8;
  --color-tdd04-bg1: oklch(0.97 0.02 350);
  --color-tdd04-bg2: #fce7f3;
  --color-tdd04-bg2: oklch(0.94 0.04 350);
  --color-tdd04-bg3: #ede9fe;
  --color-tdd04-bg3: oklch(0.94 0.03 295);
  --color-tdd04-ink: #1e1b4b;
  --color-tdd04-ink: oklch(0.26 0.08 285);
  --color-tdd04-edge: #f3f4f6;
  --color-tdd04-edge: oklch(0.96 0.003 265);
  --color-tdd04-tint: #fdf2f8;
  --color-tdd04-tint: oklch(0.97 0.02 350);
  --color-tdd04-acc: #ec4899;
  --color-tdd04-acc: oklch(0.65 0.2 350);
  --font-tdd04-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ease-tdd04: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.tdd-04 ::selection {
  background: var(--color-tdd04-acc);
  color: #fff;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap">

What changed in the port

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

  • The biggest single win in the collection: v4's independent translate and scale properties mean a centred, scaling panel no longer needs one composed arbitrary transform per state.
  • The overshoot curve is a token because it is reused by the caret and could be reused by any sibling component; arbitrary values are for one-offs.
  • Two durations on one transition list (duration-500 for scale, opacity riding shorter via its own utility pair) reproduce the original's staged feel without a shorthand.
  • motion-reduce:duration-150 keeps a reveal rather than deleting it — a spring becomes a quick fade.
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 Elastic Bounce Dropdown Menu
Source: https://codefronts.com/navigation/tailwind-dropdown-menus/tailwind-elastic-bounce-dropdown-menu/

The springy one: the panel snaps open on scale-y with an overshoot curve, so it briefly overshoots its own height and settles. Porting it is mostly about the easing token — an overshoot curve is a design decision, so it belongs in @theme as --ease-tdd04, not inline as an arbitrary value.
## HTML
```html
<section class="tdd-04 w-full min-h-svh grid justify-center content-start bg-linear-[135deg,var(--color-tdd04-bg1),var(--color-tdd04-bg2),var(--color-tdd04-bg3)] font-tdd04-sans text-tdd04-ink px-5 py-8" aria-label="Elastic bounce dropdown demo">
  <nav class="relative z-10 flex items-center gap-2 rounded-full bg-white py-2 pr-2 pl-6 shadow-[0_4px_24px_oklch(0.65_0.2_350/0.15)]" aria-label="Primary">
    <span class="mr-2 text-base font-bold tracking-[-0.3px] text-tdd04-acc">&#9670; Bounce</span>
    <div class="flex gap-0.5">
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2.5 after:content-['']">
        <a href="#explore" class="flex items-center gap-1 rounded-full px-4 py-2 text-sm font-semibold text-tdd04-ink no-underline transition-colors duration-150 group-hover:bg-tdd04-tint group-hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd04-acc">Explore &#9662;</a>
        <div class="pointer-events-none absolute top-[calc(100%+10px)] left-1/2 flex min-w-48 -translate-x-1/2 scale-y-0 origin-top flex-col gap-0.5 rounded-2xl border border-tdd04-acc/12 bg-white p-2 opacity-0 shadow-[0_12px_40px_oklch(0.65_0.2_350/0.18)] transition-[scale,opacity] duration-500 ease-tdd04 group-hover:pointer-events-auto group-hover:scale-y-100 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:scale-y-100 group-focus-within:opacity-100 motion-reduce:duration-150">
          <a href="#featured" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#127775; Featured</a>
          <a href="#trending" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#128293; Trending</a>
          <a href="#new" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#128640; New Arrivals</a>
          <a href="#top" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#127942; Top Rated</a>
          <div class="my-1 h-px bg-tdd04-edge" aria-hidden="true"></div>
          <a href="#all" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-bold text-tdd04-acc no-underline transition-colors duration-150 hover:bg-tdd04-tint focus-visible:bg-tdd04-tint focus-visible:outline-none">View All &#8594;</a>
        </div>
      </div>
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2.5 after:content-['']">
        <a href="#learn" class="flex items-center gap-1 rounded-full px-4 py-2 text-sm font-semibold text-tdd04-ink no-underline transition-colors duration-150 group-hover:bg-tdd04-tint group-hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd04-acc">Learn &#9662;</a>
        <div class="pointer-events-none absolute top-[calc(100%+10px)] left-1/2 flex min-w-48 -translate-x-1/2 scale-y-0 origin-top flex-col gap-0.5 rounded-2xl border border-tdd04-acc/12 bg-white p-2 opacity-0 shadow-[0_12px_40px_oklch(0.65_0.2_350/0.18)] transition-[scale,opacity] duration-500 ease-tdd04 group-hover:pointer-events-auto group-hover:scale-y-100 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:scale-y-100 group-focus-within:opacity-100 motion-reduce:duration-150">
          <a href="#tutorials" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#128218; Tutorials</a>
          <a href="#courses" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#127916; Video Courses</a>
          <a href="#workshops" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#127881; Workshops</a>
        </div>
      </div>
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2.5 after:content-['']">
        <a href="#connect" class="flex items-center gap-1 rounded-full px-4 py-2 text-sm font-semibold text-tdd04-ink no-underline transition-colors duration-150 group-hover:bg-tdd04-tint group-hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd04-acc">Connect &#9662;</a>
        <div class="pointer-events-none absolute top-[calc(100%+10px)] left-1/2 flex min-w-48 -translate-x-1/2 scale-y-0 origin-top flex-col gap-0.5 rounded-2xl border border-tdd04-acc/12 bg-white p-2 opacity-0 shadow-[0_12px_40px_oklch(0.65_0.2_350/0.18)] transition-[scale,opacity] duration-500 ease-tdd04 group-hover:pointer-events-auto group-hover:scale-y-100 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:scale-y-100 group-focus-within:opacity-100 motion-reduce:duration-150">
          <a href="#community" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#128172; Community</a>
          <a href="#forum" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#128101; Forum</a>
          <a href="#newsletter" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-tdd04-ink no-underline transition-colors duration-150 hover:bg-tdd04-tint hover:text-tdd04-acc focus-visible:bg-tdd04-tint focus-visible:outline-none">&#128236; Newsletter</a>
        </div>
      </div>
    </div>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tdd04-bg1: #fdf2f8;
  --color-tdd04-bg1: oklch(0.97 0.02 350);
  --color-tdd04-bg2: #fce7f3;
  --color-tdd04-bg2: oklch(0.94 0.04 350);
  --color-tdd04-bg3: #ede9fe;
  --color-tdd04-bg3: oklch(0.94 0.03 295);
  --color-tdd04-ink: #1e1b4b;
  --color-tdd04-ink: oklch(0.26 0.08 285);
  --color-tdd04-edge: #f3f4f6;
  --color-tdd04-edge: oklch(0.96 0.003 265);
  --color-tdd04-tint: #fdf2f8;
  --color-tdd04-tint: oklch(0.97 0.02 350);
  --color-tdd04-acc: #ec4899;
  --color-tdd04-acc: oklch(0.65 0.2 350);
  --font-tdd04-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ease-tdd04: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

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

How this works

Scale, not height. scale-y-0 collapses the panel with no layout cost and no max-height guessing, and origin-top anchors the spring to the trigger edge.

The overshoot lives in the curve. The second control point's Y of 1.56 pushes the tween past 1 before it settles — the entire elastic feel is one token.

v4 fixed the composition problem. In v3 a centred panel had to write translateX(-50%) scaleY(0) as one arbitrary transform, and every state had to repeat both halves. v4 emits translate and scale as separate properties, so -translate-x-1/2 and scale-y-0 coexist and only the changing half is restated on hover.

Content timing hides the squash. duration-500 on the transform against duration-200 on opacity means the links fade in while the box is still stretching, which is what stops the text from visibly compressing.

Make it yours

  • Bounciness: edit --ease-tdd04. cubic-bezier(0.68,-0.55,0.27,1.55) adds a back-swing before the open.
  • Anchor: origin-top → origin-top-left for a corner fan-out.
  • Snap shut faster: put duration-200 ease-in in the base class list and group-hover:duration-500 in the open half.
  • Elevation: animate it too by adding a shadow-none group-hover:shadow-[…] pair.

Gotchas — read before shipping

  • A scale-y-0 panel is still hit-testable — pointer-events-none until open is mandatory, not optional.
  • The overshoot makes the panel briefly taller than its resting height; make sure no ancestor clips it.
  • Text inside a scaling box is squashed for the duration; short opacity delays are the cheap fix, counter-scaling the children is the expensive one.
  • Don't mix scale-y-* with a max-h-* collapse — you get two competing collapses and a stutter.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Independent transform properties (translate/scale/rotate) are Baseline 2022; Tailwind v4 relies on them throughout.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transform origintw ↗transitionstw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →