47 Tailwind CSS Toggles & Switches
34 / 47

All 47 in 47 Tailwind CSS Toggles & Switches

  1. 01Tailwind iOS-Style Toggle Switch with appearance-none
  2. 02Tailwind Dark Mode Sun / Moon Theme Switcher
  3. 03Tailwind Neumorphic Soft-UI Pill Toggle
  4. 04Tailwind Gooey Liquid Morphing Switch with SVG Filter
  5. 05Tailwind Bouncy Elastic Physics Toggle (Overshoot Cubic-Bezier)
  6. 06Tailwind ON / OFF Text Switch with Labels Inside the Track
  7. 07Tailwind SaaS Pricing Toggle — Monthly / Annually Segmented Pill
  8. 08Tailwind Mechanical Keycap Toggles with Haptic Feedback
  9. 09Tailwind Waveform Mute Toggle with Animated EQ Bars
  10. 10Tailwind Timed Auto-Off Toggle with Conic Countdown Ring
  11. 11Tailwind Press-and-Hold to Confirm Toggle (Fingerprint Scan)
  12. 12Tailwind Split-Flap Departure Board Toggle (3D Flip)
  13. 13Tailwind Permission Toggle Group with :has() Live Status Badge
  14. 14Tailwind Material Design 3 Switch with State Layer
  15. 15Tailwind Skeuomorphic Wall Light Switch with Room Relight
  16. 16Tailwind Neon Cyberpunk Toggle with Clipped Corners
  17. 17Tailwind Brutalist Snap Toggle with Hard Offset Shadow
  18. 18Tailwind Day / Night Landscape Scene Switch
  19. 19Tailwind 3D Flip Card Toggle (rotateY Switch)
  20. 20Tailwind Sliding Pill Toggle with Label Inside the Thumb
  21. 21Tailwind Glassmorphism Frosted Toggle with backdrop-blur
  22. 22Tailwind Rotary Knob Toggle with Brushed-Metal Conic Gradient
  23. 23Tailwind iOS Settings List with Grouped Toggle Rows
  24. 24Tailwind Minimal Outline Toggle Drawn in currentColor
  25. 25Tailwind Squash-and-Stretch Pebble Toggle
  26. 26Tailwind Industrial Rocker I/O Power Switch
  27. 27Tailwind Accessible role=switch Toggle with forced-colors Support
  28. 28Tailwind Macro-Pad Toggle Grid with RGB Underglow
  29. 29Tailwind Radial VU Meter Mute Toggle
  30. 30Tailwind Segmented Pip Countdown Auto-Off Toggle
  31. 31Tailwind Slide-to-Confirm Toggle Rail (Drag or Arrow Keys)
  32. 32Tailwind Odometer Roll ON / OFF Toggle
  33. 33Tailwind Master Toggle with Indeterminate Tri-State
  34. 34Tailwind iOS Control Centre Tile Toggles
  35. 35Tailwind Material 3 Connected Icon Toggle Buttons
  36. 36Tailwind Two-Gang Wall Plate with Cumulative Room Light
  37. 37Tailwind Neon Toggle with Animated Conic Border Light
  38. 38Tailwind Brutalist Rubber-Stamp Toggle
  39. 39Tailwind Aurora Night Sky Toggle Switch
  40. 40Tailwind 3D Rotating Cube Toggle
  41. 41Tailwind Three-Position Off / Auto / On Selector
  42. 42Tailwind Liquid Glass Toggle with Specular Highlight
  43. 43Tailwind Three-Detent Rotary Selector Knob
  44. 44Tailwind Hardware Slide Switch with Knurled Grip
  45. 45Tailwind Battery Saver Toggle with Live Fill Meter
  46. 46Tailwind Morphing Sun-to-Moon Icon Toggle (SVG Stroke)
  47. 47Tailwind Guarded Kill Switch Under a Flip-Up Safety Cover
Pure TailwindMIT licensed

Tailwind iOS Control Centre Tile Toggles

Settings as tiles, not rows: a 2×2 quick-settings grid where the whole tile is the switch — it fills with its accent when on, dims to frosted glass when off, and dips under the finger. The touch target is 150×80, so nobody misses.

Live Demo
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="ttg-34 relative overflow-hidden w-full min-h-svh grid place-items-center px-5 py-14 bg-linear-150 from-ttg34-wallhi via-ttg34-wallmid to-ttg34-walllo font-ttg34-sans" aria-label="Control centre tile toggles">
  <div class="grid grid-cols-2 gap-3.5 w-[min(340px,100%)]">
    <label class="relative isolate overflow-hidden flex flex-col justify-between h-24 p-4 rounded-[22px] cursor-pointer bg-white/10 border border-white/15 transition-transform duration-200 active:scale-[0.97] motion-reduce:transition-none" style="--accent:oklch(0.62 0.2 256)">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-20 rounded-[22px] backdrop-blur-xl"></span>
      <input type="checkbox" role="switch" checked aria-label="Wi-Fi" class="peer sr-only">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10 rounded-[22px] bg-(--accent) opacity-0 transition-opacity duration-200 peer-checked:opacity-100 motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[22px] peer-focus-visible:outline-3 peer-focus-visible:outline-white peer-focus-visible:outline-offset-[3px]"></span>
      <span class="relative flex items-center justify-between peer-checked:[&_.ttg34-dot]:bg-white">
        <span aria-hidden="true" class="grid place-items-center w-7 h-7 rounded-full bg-white/20 text-white text-[14px]">&#9679;</span>
        <span class="ttg34-dot w-2 h-2 rounded-full bg-white/25 transition-colors duration-200"></span>
      </span>
      <span class="relative flex flex-col peer-checked:[&_.ttg34-state]:text-white/85">
        <b class="text-[14px] font-semibold text-white leading-tight">Wi-Fi</b>
        <small class="ttg34-state text-[11.5px] text-white/55 transition-colors duration-200">Studio 5G</small>
      </span>
    </label>
    <label class="relative isolate overflow-hidden flex flex-col justify-between h-24 p-4 rounded-[22px] cursor-pointer bg-white/10 border border-white/15 transition-transform duration-200 active:scale-[0.97] motion-reduce:transition-none" style="--accent:oklch(0.6 0.19 285)">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-20 rounded-[22px] backdrop-blur-xl"></span>
      <input type="checkbox" role="switch" checked aria-label="Bluetooth" class="peer sr-only">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10 rounded-[22px] bg-(--accent) opacity-0 transition-opacity duration-200 peer-checked:opacity-100 motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[22px] peer-focus-visible:outline-3 peer-focus-visible:outline-white peer-focus-visible:outline-offset-[3px]"></span>
      <span class="relative flex items-center justify-between peer-checked:[&_.ttg34-dot]:bg-white">
        <span aria-hidden="true" class="grid place-items-center w-7 h-7 rounded-full bg-white/20 text-white text-[14px]">&#10022;</span>
        <span class="ttg34-dot w-2 h-2 rounded-full bg-white/25 transition-colors duration-200"></span>
      </span>
      <span class="relative flex flex-col peer-checked:[&_.ttg34-state]:text-white/85">
        <b class="text-[14px] font-semibold text-white leading-tight">Bluetooth</b>
        <small class="ttg34-state text-[11.5px] text-white/55 transition-colors duration-200">2 devices</small>
      </span>
    </label>
    <label class="relative isolate overflow-hidden flex flex-col justify-between h-24 p-4 rounded-[22px] cursor-pointer bg-white/10 border border-white/15 transition-transform duration-200 active:scale-[0.97] motion-reduce:transition-none" style="--accent:oklch(0.68 0.19 50)">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-20 rounded-[22px] backdrop-blur-xl"></span>
      <input type="checkbox" role="switch" aria-label="Focus" class="peer sr-only">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10 rounded-[22px] bg-(--accent) opacity-0 transition-opacity duration-200 peer-checked:opacity-100 motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[22px] peer-focus-visible:outline-3 peer-focus-visible:outline-white peer-focus-visible:outline-offset-[3px]"></span>
      <span class="relative flex items-center justify-between peer-checked:[&_.ttg34-dot]:bg-white">
        <span aria-hidden="true" class="grid place-items-center w-7 h-7 rounded-full bg-white/20 text-white text-[14px]">&#9790;</span>
        <span class="ttg34-dot w-2 h-2 rounded-full bg-white/25 transition-colors duration-200"></span>
      </span>
      <span class="relative flex flex-col peer-checked:[&_.ttg34-state]:text-white/85">
        <b class="text-[14px] font-semibold text-white leading-tight">Focus</b>
        <small class="ttg34-state text-[11.5px] text-white/55 transition-colors duration-200">Off</small>
      </span>
    </label>
    <label class="relative isolate overflow-hidden flex flex-col justify-between h-24 p-4 rounded-[22px] cursor-pointer bg-white/10 border border-white/15 transition-transform duration-200 active:scale-[0.97] motion-reduce:transition-none" style="--accent:oklch(0.72 0.17 150)">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-20 rounded-[22px] backdrop-blur-xl"></span>
      <input type="checkbox" role="switch" aria-label="Low power mode" class="peer sr-only">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10 rounded-[22px] bg-(--accent) opacity-0 transition-opacity duration-200 peer-checked:opacity-100 motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[22px] peer-focus-visible:outline-3 peer-focus-visible:outline-white peer-focus-visible:outline-offset-[3px]"></span>
      <span class="relative flex items-center justify-between peer-checked:[&_.ttg34-dot]:bg-white">
        <span aria-hidden="true" class="grid place-items-center w-7 h-7 rounded-full bg-white/20 text-white text-[14px]">&#9889;</span>
        <span class="ttg34-dot w-2 h-2 rounded-full bg-white/25 transition-colors duration-200"></span>
      </span>
      <span class="relative flex flex-col peer-checked:[&_.ttg34-state]:text-white/85">
        <b class="text-[14px] font-semibold text-white leading-tight">Low Power</b>
        <small class="ttg34-state text-[11.5px] text-white/55 transition-colors duration-200">Off</small>
      </span>
    </label>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-ttg34-wallhi: #2a1f4d;
  --color-ttg34-wallhi: oklch(0.3 0.09 295);
  --color-ttg34-wallmid: #1b2a52;
  --color-ttg34-wallmid: oklch(0.31 0.08 265);
  --color-ttg34-walllo: #123240;
  --color-ttg34-walllo: oklch(0.33 0.06 220);
  --font-ttg34-sans: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
}

.ttg-34 {
  width: 100%;
  min-height: 100svh;
}
/* The frost lives on an inner layer, never on the :has() subject — see notes. */

.ttg-34 label > span[aria-hidden]:first-child {
  -webkit-backdrop-filter: blur(24px);
}

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-ttg34-wallhi: #2a1f4d;
  --color-ttg34-wallhi: oklch(0.3 0.09 295);
  --color-ttg34-wallmid: #1b2a52;
  --color-ttg34-wallmid: oklch(0.31 0.08 265);
  --color-ttg34-walllo: #123240;
  --color-ttg34-walllo: oklch(0.33 0.06 220);
  --font-ttg34-sans: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
}

.ttg-34 {
  width: 100%;
  min-height: 100svh;
}
/* The frost lives on an inner layer, never on the :has() subject — see notes. */

.ttg-34 label > span[aria-hidden]:first-child {
  -webkit-backdrop-filter: blur(24px);
}
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 tile is painted by a peer-checked:opacity-100 fill layer rather than by recolouring the label, and that is a correctness decision, not a style one. The obvious authoring — has-checked:bg-(--accent) on the label — compiles correctly, matches correctly, and then fails to REPAINT when the state changes at runtime on a backdrop-filtered element: identical tiles update on load and some never update on click. Sibling invalidation (peer-*) has no such problem, so where a container must react to its own input, drive it from a layer that is a sibling of that input.
  • Three stacked layers do the work: a frost layer at -z-20, an accent fill at -z-10 that fades in, and a transparent ring layer for peer-focus-visible:. The content sits above them with relative, and isolate keeps the whole stack out of the page's z-order.
  • peer-focus-visible: on a dedicated overlay draws the ring around the whole tile when the hidden input is focused — the only correct place for it when the input itself has no visual form.
  • Four tiles share one class list and differ by an inline --accent and their copy — the same per-instance-property pattern as the keycaps and the iOS glyph tiles.
  • UI upgrade over demo 23: the row list becomes a grid of 96px-tall targets, each tile states its own detail line ("Studio 5G", "2 devices") instead of a bare name, and every state carries three signals — fill, dot and word — rather than the position of a 51px switch.
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 iOS Control Centre Tile Toggles
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-ios-control-centre-tile-toggles/

Settings as tiles, not rows: a 2&times;2 quick-settings grid where the whole tile is the switch &mdash; it fills with its accent when on, dims to frosted glass when off, and dips under the finger. The touch target is 150&times;80, so nobody misses.
## HTML
```html
<section class="ttg-34 relative overflow-hidden w-full min-h-svh grid place-items-center px-5 py-14 bg-linear-150 from-ttg34-wallhi via-ttg34-wallmid to-ttg34-walllo font-ttg34-sans" aria-label="Control centre tile toggles">
  <div class="grid grid-cols-2 gap-3.5 w-[min(340px,100%)]">
    <label class="relative isolate overflow-hidden flex flex-col justify-between h-24 p-4 rounded-[22px] cursor-pointer bg-white/10 border border-white/15 transition-transform duration-200 active:scale-[0.97] motion-reduce:transition-none" style="--accent:oklch(0.62 0.2 256)">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-20 rounded-[22px] backdrop-blur-xl"></span>
      <input type="checkbox" role="switch" checked aria-label="Wi-Fi" class="peer sr-only">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10 rounded-[22px] bg-(--accent) opacity-0 transition-opacity duration-200 peer-checked:opacity-100 motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[22px] peer-focus-visible:outline-3 peer-focus-visible:outline-white peer-focus-visible:outline-offset-[3px]"></span>
      <span class="relative flex items-center justify-between peer-checked:[&_.ttg34-dot]:bg-white">
        <span aria-hidden="true" class="grid place-items-center w-7 h-7 rounded-full bg-white/20 text-white text-[14px]">&#9679;</span>
        <span class="ttg34-dot w-2 h-2 rounded-full bg-white/25 transition-colors duration-200"></span>
      </span>
      <span class="relative flex flex-col peer-checked:[&_.ttg34-state]:text-white/85">
        <b class="text-[14px] font-semibold text-white leading-tight">Wi-Fi</b>
        <small class="ttg34-state text-[11.5px] text-white/55 transition-colors duration-200">Studio 5G</small>
      </span>
    </label>
    <label class="relative isolate overflow-hidden flex flex-col justify-between h-24 p-4 rounded-[22px] cursor-pointer bg-white/10 border border-white/15 transition-transform duration-200 active:scale-[0.97] motion-reduce:transition-none" style="--accent:oklch(0.6 0.19 285)">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-20 rounded-[22px] backdrop-blur-xl"></span>
      <input type="checkbox" role="switch" checked aria-label="Bluetooth" class="peer sr-only">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10 rounded-[22px] bg-(--accent) opacity-0 transition-opacity duration-200 peer-checked:opacity-100 motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[22px] peer-focus-visible:outline-3 peer-focus-visible:outline-white peer-focus-visible:outline-offset-[3px]"></span>
      <span class="relative flex items-center justify-between peer-checked:[&_.ttg34-dot]:bg-white">
        <span aria-hidden="true" class="grid place-items-center w-7 h-7 rounded-full bg-white/20 text-white text-[14px]">&#10022;</span>
        <span class="ttg34-dot w-2 h-2 rounded-full bg-white/25 transition-colors duration-200"></span>
      </span>
      <span class="relative flex flex-col peer-checked:[&_.ttg34-state]:text-white/85">
        <b class="text-[14px] font-semibold text-white leading-tight">Bluetooth</b>
        <small class="ttg34-state text-[11.5px] text-white/55 transition-colors duration-200">2 devices</small>
      </span>
    </label>
    <label class="relative isolate overflow-hidden flex flex-col justify-between h-24 p-4 rounded-[22px] cursor-pointer bg-white/10 border border-white/15 transition-transform duration-200 active:scale-[0.97] motion-reduce:transition-none" style="--accent:oklch(0.68 0.19 50)">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-20 rounded-[22px] backdrop-blur-xl"></span>
      <input type="checkbox" role="switch" aria-label="Focus" class="peer sr-only">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10 rounded-[22px] bg-(--accent) opacity-0 transition-opacity duration-200 peer-checked:opacity-100 motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[22px] peer-focus-visible:outline-3 peer-focus-visible:outline-white peer-focus-visible:outline-offset-[3px]"></span>
      <span class="relative flex items-center justify-between peer-checked:[&_.ttg34-dot]:bg-white">
        <span aria-hidden="true" class="grid place-items-center w-7 h-7 rounded-full bg-white/20 text-white text-[14px]">&#9790;</span>
        <span class="ttg34-dot w-2 h-2 rounded-full bg-white/25 transition-colors duration-200"></span>
      </span>
      <span class="relative flex flex-col peer-checked:[&_.ttg34-state]:text-white/85">
        <b class="text-[14px] font-semibold text-white leading-tight">Focus</b>
        <small class="ttg34-state text-[11.5px] text-white/55 transition-colors duration-200">Off</small>
      </span>
    </label>
    <label class="relative isolate overflow-hidden flex flex-col justify-between h-24 p-4 rounded-[22px] cursor-pointer bg-white/10 border border-white/15 transition-transform duration-200 active:scale-[0.97] motion-reduce:transition-none" style="--accent:oklch(0.72 0.17 150)">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-20 rounded-[22px] backdrop-blur-xl"></span>
      <input type="checkbox" role="switch" aria-label="Low power mode" class="peer sr-only">
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10 rounded-[22px] bg-(--accent) opacity-0 transition-opacity duration-200 peer-checked:opacity-100 motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[22px] peer-focus-visible:outline-3 peer-focus-visible:outline-white peer-focus-visible:outline-offset-[3px]"></span>
      <span class="relative flex items-center justify-between peer-checked:[&_.ttg34-dot]:bg-white">
        <span aria-hidden="true" class="grid place-items-center w-7 h-7 rounded-full bg-white/20 text-white text-[14px]">&#9889;</span>
        <span class="ttg34-dot w-2 h-2 rounded-full bg-white/25 transition-colors duration-200"></span>
      </span>
      <span class="relative flex flex-col peer-checked:[&_.ttg34-state]:text-white/85">
        <b class="text-[14px] font-semibold text-white leading-tight">Low Power</b>
        <small class="ttg34-state text-[11.5px] text-white/55 transition-colors duration-200">Off</small>
      </span>
    </label>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg34-wallhi: #2a1f4d;
  --color-ttg34-wallhi: oklch(0.3 0.09 295);
  --color-ttg34-wallmid: #1b2a52;
  --color-ttg34-wallmid: oklch(0.31 0.08 265);
  --color-ttg34-walllo: #123240;
  --color-ttg34-walllo: oklch(0.33 0.06 220);
  --font-ttg34-sans: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
}

.ttg-34 {
  width: 100%;
  min-height: 100svh;
}
/* The frost lives on an inner layer, never on the :has() subject — see notes. */

.ttg-34 label > span[aria-hidden]:first-child {
  -webkit-backdrop-filter: blur(24px);
}
```

How this works

The tile is the switch. There is no separate control — a label wraps an sr-only checkbox and reacts with has-checked:. That is the whole idea of a quick-settings grid: maximum target, minimum chrome, and the state is legible from arm's length because the entire block changes colour.

Two signals, because colour alone is not enough. The fill carries the state at a glance; a small dot and an On/Off word carry it in greyscale and for anyone who cannot rely on the hue.

Off is glass, on is paint. Off tiles are bg-white/10 over a blurred backdrop so the wallpaper shows through; on tiles are solid accent. The difference in material, not just tone, is what makes a half-on grid scannable.

Make it yours

  • Per-tile accent is one inline --accent; fill, dot and focus ring all read it.
  • Go 3-wide for a tablet layout: change grid-cols-2 and nothing else.
  • Add a long-press detail panel by wrapping each tile in a <details>.
  • Swap the glyph block for real SF-Symbols-style SVGs at the same 28px size.

Gotchas — read before shipping

  • A tile this large must still say On or Off in words — at 150px wide, a colour-only state is the least accessible thing on the screen, not the most obvious.
  • Keep active:scale small (0.97). A big dip on a big tile reads as the layout breaking.
  • backdrop-blur needs something behind it; on a flat background the off state is just grey.
  • Never put backdrop-blur-* on the same element as has-checked:. The state rule compiles, the selector matches, element.matches() returns true, and the tile still refuses to repaint on click — an invalidation bug that looks exactly like a broken selector. Prefer peer-* whenever the reacting element can be made a sibling of the input.
  • Do not nest a second switch inside the tile — two controls for one setting is the classic quick-settings bug.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:has() (Firefox 121+) drives the whole demo; backdrop-filter is Firefox 103+ and degrades to a flat translucent tile.

Techniques used in this demo

Utilitiesfirst-class utility or variant

backdrop-filtertw ↗:has()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →