47 Tailwind CSS Toggles & Switches
38 / 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 Brutalist Rubber-Stamp Toggle

Checking it stamps: a rotated APPROVED block slams down over the card with a scale-and-settle keyframe, borders 3px, shadow hard and offset. Where demo 17 snaps a thumb, this one commits an act — the state looks like a decision that was made.

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-38 w-full min-h-svh grid place-items-center px-8 py-16 bg-ttg38-bg font-ttg38-mono" aria-label="Brutalist stamp toggle">
  <div class="relative">
    <input type="checkbox" id="ttg-38-sw" role="switch" aria-label="Approve expense report" class="peer sr-only">
    <label for="ttg-38-sw" class="flex flex-col gap-5 w-[min(340px,100%)] p-7 bg-white border-[3px] border-ttg38-line cursor-pointer shadow-[8px_8px_0_var(--color-ttg38-line)] transition-[background-color,box-shadow] duration-[90ms] ease-[steps(1,end)] active:translate-x-1 active:translate-y-1 active:shadow-[4px_4px_0_var(--color-ttg38-line)] peer-checked:bg-ttg38-paperon peer-focus-visible:outline-4 peer-focus-visible:outline-ttg38-line peer-focus-visible:outline-offset-4 peer-checked:[&_.ttg38-track]:bg-ttg38-ink peer-checked:[&_.ttg38-thumb]:translate-x-[40px] motion-reduce:transition-none">
      <span class="flex flex-col gap-1">
        <b class="text-[11px] font-bold tracking-[0.22em] text-ttg38-muted">EXPENSE / 4471</b>
        <span class="text-[19px] font-extrabold tracking-[-0.01em] text-ttg38-line leading-tight">Q3 hardware &mdash; $2,480</span>
      </span>
      <span class="flex items-center justify-between gap-4 pt-4 border-t-[3px] border-ttg38-line">
        <span class="text-[13px] font-bold tracking-[0.12em] text-ttg38-line">APPROVE</span>
        <span aria-hidden="true" class="ttg38-track block w-20 h-10 border-[3px] border-ttg38-line bg-white relative transition-colors duration-[90ms] ease-[steps(1,end)]">
          <i class="ttg38-thumb absolute top-0.5 left-0.5 block w-7 h-7 bg-ttg38-line transition-transform duration-[90ms] ease-[steps(1,end)]"></i>
        </span>
      </span>
    </label>
    <span aria-hidden="true" class="ttg38-stamp pointer-events-none peer-checked:opacity-100 peer-checked:animate-ttg38-slam motion-reduce:peer-checked:animate-none absolute -top-5 -right-6 grid place-items-center px-5 py-2.5 opacity-0 -rotate-[14deg] border-[5px] border-ttg38-ink outline-4 outline-ttg38-ink outline-offset-[-10px] text-[22px] font-extrabold tracking-[0.14em] text-ttg38-ink">APPROVED</span>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-ttg38-bg: #ece8dd;
  --color-ttg38-bg: oklch(0.93 0.012 90);
  --color-ttg38-line: #000000;
  --color-ttg38-line: oklch(0 0 0);
  --color-ttg38-ink: #c2261f;
  --color-ttg38-ink: oklch(0.5 0.2 27);
  --color-ttg38-paperon: #fdf6e8;
  --color-ttg38-paperon: oklch(0.97 0.02 88);
  --color-ttg38-muted: #57534a;
  --color-ttg38-muted: oklch(0.45 0.012 90);
  --font-ttg38-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --animate-ttg38-slam: ttg38-slam 0.26s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes ttg38-slam {
  0% {
    opacity: 0;
    transform: rotate(-14deg) scale(2.4);
  }

  60% {
    opacity: 1;
    transform: rotate(-14deg) scale(0.92);
  }

  100% {
    opacity: 1;
    transform: rotate(-14deg) scale(1);
  }
}

.ttg-38 {
  width: 100%;
  min-height: 100svh;
}
/* The stamp is a sibling of the label, not a descendant, so the peer state reaches it
   directly — and it must stay visible after the animation under reduced motion. */

@media (prefers-reduced-motion: reduce) {
  .ttg-38 .peer:checked ~ .ttg38-stamp {
    opacity: 1;
    transform: rotate(-14deg) scale(1);
  }
}

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-ttg38-bg: #ece8dd;
  --color-ttg38-bg: oklch(0.93 0.012 90);
  --color-ttg38-line: #000000;
  --color-ttg38-line: oklch(0 0 0);
  --color-ttg38-ink: #c2261f;
  --color-ttg38-ink: oklch(0.5 0.2 27);
  --color-ttg38-paperon: #fdf6e8;
  --color-ttg38-paperon: oklch(0.97 0.02 88);
  --color-ttg38-muted: #57534a;
  --color-ttg38-muted: oklch(0.45 0.012 90);
  --font-ttg38-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --animate-ttg38-slam: ttg38-slam 0.26s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes ttg38-slam {
  0% {
    opacity: 0;
    transform: rotate(-14deg) scale(2.4);
  }

  60% {
    opacity: 1;
    transform: rotate(-14deg) scale(0.92);
  }

  100% {
    opacity: 1;
    transform: rotate(-14deg) scale(1);
  }
}

.ttg-38 {
  width: 100%;
  min-height: 100svh;
}
/* The stamp is a sibling of the label, not a descendant, so the peer state reaches it
   directly — and it must stay visible after the animation under reduced motion. */

@media (prefers-reduced-motion: reduce) {
  .ttg-38 .peer:checked ~ .ttg38-stamp {
    opacity: 1;
    transform: rotate(-14deg) scale(1);
  }
}
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=JetBrains+Mono:wght@400;500;700;800&display=swap">

What changed in the port

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

  • Every keyframe restates rotate(-14deg). A transform keyframe replaces the whole property, so omitting the rotation in one frame un-rotates the stamp mid-slam — the most common bug when animating one part of a compound transform.
  • The stamp sits OUTSIDE the label as a peer sibling, which is what lets it overlap the card's corner without being clipped by the label's own box.
  • outline-offset-[-10px] draws the inner rule of the stamp without a second element — negative outline offsets are underused and exactly right for double-ruled borders.
  • UI upgrade over demo 17: the state now reads as an action performed on a document rather than a pill flipping, the card carries real content (an expense line) so the switch has a consequence, and the muted ink is oklch(0.45) for 8.9:1 against paper.
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 Brutalist Rubber-Stamp Toggle
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-brutalist-rubber-stamp-toggle/

Checking it stamps: a rotated APPROVED block slams down over the card with a scale-and-settle keyframe, borders 3px, shadow hard and offset. Where demo 17 snaps a thumb, this one commits an act &mdash; the state looks like a decision that was made.
## HTML
```html
<section class="ttg-38 w-full min-h-svh grid place-items-center px-8 py-16 bg-ttg38-bg font-ttg38-mono" aria-label="Brutalist stamp toggle">
  <div class="relative">
    <input type="checkbox" id="ttg-38-sw" role="switch" aria-label="Approve expense report" class="peer sr-only">
    <label for="ttg-38-sw" class="flex flex-col gap-5 w-[min(340px,100%)] p-7 bg-white border-[3px] border-ttg38-line cursor-pointer shadow-[8px_8px_0_var(--color-ttg38-line)] transition-[background-color,box-shadow] duration-[90ms] ease-[steps(1,end)] active:translate-x-1 active:translate-y-1 active:shadow-[4px_4px_0_var(--color-ttg38-line)] peer-checked:bg-ttg38-paperon peer-focus-visible:outline-4 peer-focus-visible:outline-ttg38-line peer-focus-visible:outline-offset-4 peer-checked:[&_.ttg38-track]:bg-ttg38-ink peer-checked:[&_.ttg38-thumb]:translate-x-[40px] motion-reduce:transition-none">
      <span class="flex flex-col gap-1">
        <b class="text-[11px] font-bold tracking-[0.22em] text-ttg38-muted">EXPENSE / 4471</b>
        <span class="text-[19px] font-extrabold tracking-[-0.01em] text-ttg38-line leading-tight">Q3 hardware &mdash; $2,480</span>
      </span>
      <span class="flex items-center justify-between gap-4 pt-4 border-t-[3px] border-ttg38-line">
        <span class="text-[13px] font-bold tracking-[0.12em] text-ttg38-line">APPROVE</span>
        <span aria-hidden="true" class="ttg38-track block w-20 h-10 border-[3px] border-ttg38-line bg-white relative transition-colors duration-[90ms] ease-[steps(1,end)]">
          <i class="ttg38-thumb absolute top-0.5 left-0.5 block w-7 h-7 bg-ttg38-line transition-transform duration-[90ms] ease-[steps(1,end)]"></i>
        </span>
      </span>
    </label>
    <span aria-hidden="true" class="ttg38-stamp pointer-events-none peer-checked:opacity-100 peer-checked:animate-ttg38-slam motion-reduce:peer-checked:animate-none absolute -top-5 -right-6 grid place-items-center px-5 py-2.5 opacity-0 -rotate-[14deg] border-[5px] border-ttg38-ink outline-4 outline-ttg38-ink outline-offset-[-10px] text-[22px] font-extrabold tracking-[0.14em] text-ttg38-ink">APPROVED</span>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg38-bg: #ece8dd;
  --color-ttg38-bg: oklch(0.93 0.012 90);
  --color-ttg38-line: #000000;
  --color-ttg38-line: oklch(0 0 0);
  --color-ttg38-ink: #c2261f;
  --color-ttg38-ink: oklch(0.5 0.2 27);
  --color-ttg38-paperon: #fdf6e8;
  --color-ttg38-paperon: oklch(0.97 0.02 88);
  --color-ttg38-muted: #57534a;
  --color-ttg38-muted: oklch(0.45 0.012 90);
  --font-ttg38-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --animate-ttg38-slam: ttg38-slam 0.26s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes ttg38-slam {
  0% {
    opacity: 0;
    transform: rotate(-14deg) scale(2.4);
  }

  60% {
    opacity: 1;
    transform: rotate(-14deg) scale(0.92);
  }

  100% {
    opacity: 1;
    transform: rotate(-14deg) scale(1);
  }
}

.ttg-38 {
  width: 100%;
  min-height: 100svh;
}
/* The stamp is a sibling of the label, not a descendant, so the peer state reaches it
   directly — and it must stay visible after the animation under reduced motion. */

@media (prefers-reduced-motion: reduce) {
  .ttg-38 .peer:checked ~ .ttg38-stamp {
    opacity: 1;
    transform: rotate(-14deg) scale(1);
  }
}
```

How this works

The slam is three keyframes. Enormous and transparent, then overshooting small and opaque, then settled at 1. It is under 300ms and uses no easing curve worth naming — the impact comes from the scale ratio, not the timing function.

The stamp is absolutely positioned and rotated, overlapping the card's edge so it reads as applied ON TOP of the document rather than laid out inside it. Overlap is doing most of the work; without it the effect is a badge.

The switch underneath is deliberately plain. A 3px-bordered square with a black block thumb, no radius anywhere. The stamp is the decoration budget for this demo, and spending it twice would make both look cheap.

Make it yours

  • Change the word: VOID, PAID, DRAFT, REJECTED. Keep it one short word in heavy caps.
  • Ink colour through --color-ttg38-ink; the stamp, its double rule and the card border all read it.
  • Rougher edge: add a subtle mask of noise for the classic imperfect-ink look.
  • Remove the rotation for an audit-log aesthetic — level stamps read as systematic.

Gotchas — read before shipping

  • The stamp is decorative and must be aria-hidden; the state a screen reader hears comes from the checkbox, and hearing "APPROVED" as a separate label is confusing.
  • Keep the slam under ~300ms. A slow stamp reads as a modal appearing.
  • Under motion-reduce: the stamp must still APPEAR, just without the scale — removing the animation entirely would delete the state.
  • An overlapping rotated element needs the card to have room; give the layout padding, or the stamp clips on narrow screens.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Transforms and keyframes only; works everywhere modern with no feature-query fallback needed.

Techniques used in this demo

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →