29 Tailwind CSS Checkboxes
08 / 29

All 29 in 29 Tailwind CSS Checkboxes

  1. 01Tailwind CSS Toggle Switch — iOS-Style SaaS Settings
  2. 02Tailwind Filter Chip Checkbox — Style Checkbox as Button
  3. 03Tailwind Pricing Plan Card Select — Checkbox-Style Selectable Cards
  4. 04Pure Tailwind CSS Accordion with Checkbox — No JavaScript
  5. 05Tailwind Indeterminate Checkbox — Select All with Tri-State
  6. 06Accessible Custom Checkbox in Tailwind CSS — WCAG Focus Ring
  7. 07Tailwind Slide Toggle with ON/OFF Labels — GPU translate3d
  8. 08Neon Glow Checkbox in Tailwind CSS — Dark Mode Gaming UI
  9. 09Animated SVG Checkmark in Tailwind CSS — stroke-dashoffset Draw
  10. 10Bouncy Checkbox Animation in Tailwind CSS — Spring cubic-bezier
  11. 11Glassmorphism Checkbox in Tailwind CSS — backdrop-blur Frosted Glass
  12. 12Neumorphism Checkbox in Tailwind CSS — Soft UI
  13. 13Liquid Fill Checkbox Animation in Tailwind CSS — Water Wave
  14. 14Rotating Ring Checkbox in Tailwind CSS — Spin-to-Check
  15. 15Brutalist Checkbox in Tailwind CSS — Neo-Brutalism Hard Shadow
  16. 16Animated Gradient Checkbox in Tailwind CSS — Rainbow Sweep
  17. 173D Flip Checkbox in Tailwind CSS — perspective & backface-hidden
  18. 18Material Ripple Checkbox in Tailwind CSS — State Layer & Wave
  19. 19Retro Pixel Art Checkbox in Tailwind CSS — 8-Bit Arcade Menu
  20. 20Tailwind CSS To-Do List Checkbox with Animated Strikethrough
  21. 21Gooey Blob Checkbox in Tailwind CSS — blur + contrast Filter
  22. 22Tailwind Dark Mode Toggle Switch — Sun & Moon, No JavaScript
  23. 23Pulse Ring Checkbox in Tailwind CSS — Live Status Indicator
  24. 24Tailwind CSS Dash-to-Check SVG Morph Checkbox
  25. 25Tri-State Checkbox in Tailwind CSS + JavaScript — Done / N/A / Unset
  26. 26Magnetic Hover Checkbox in Tailwind CSS + JavaScript
  27. 27Confetti Checkbox Animation in Tailwind CSS — Pure CSS Particle Burst
  28. 28Slide-In Label Checkbox in Tailwind CSS — Saved Tag Reveal
  29. 29Aurora Gradient Toggle Switch in Tailwind CSS — Premium Dark UI
Pure TailwindMIT licensed

Neon Glow Checkbox in Tailwind CSS — Dark Mode Gaming UI

A cyan glow that breathes around every checked box: a layered shadow-tcb08-glow token on a before: pseudo-element, pulsed with animate-tcb08-pulse — opacity only, so the glow never repaints the layout. Checked labels brighten to full white.

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="tcb-08 w-full min-h-svh grid place-items-center bg-tcb08-bg bg-[radial-gradient(120%_120%_at_50%_0%,var(--color-tcb08-glowbg),transparent_70%)] px-5 py-14 font-tcb08-sans text-tcb08-ink selection:bg-tcb08-neon selection:text-tcb08-bg" aria-label="Neon glow checkboxes">
  <div class="w-full max-w-[25rem] rounded-2xl border border-white/10 bg-white/[0.03] p-3.5">
    <p class="px-3.5 pb-2 pt-1 text-[11px] font-bold uppercase tracking-[0.2em] text-tcb08-neon">Performance</p>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 rounded-xl px-3.5 transition-colors hover:bg-white/[0.04]"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="relative grid size-6 flex-none place-items-center rounded-[7px] border-2 border-tcb08-line bg-white/[0.02] text-tcb08-neon transition-colors duration-300 peer-checked:border-tcb08-neon peer-checked:bg-tcb08-neon/10 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb08-neon before:pointer-events-none before:absolute before:-inset-px before:rounded-[7px] before:opacity-0 before:shadow-tcb08-glow before:transition-opacity before:duration-300 before:content-[''] group-has-checked:before:animate-tcb08-pulse group-has-checked:before:opacity-100 motion-reduce:transition-none motion-reduce:before:animate-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-[15px] scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="text-[15px] tracking-[0.01em] transition-colors group-has-checked:text-white">Enable RGB sync</span></label>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 rounded-xl px-3.5 transition-colors hover:bg-white/[0.04]"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="relative grid size-6 flex-none place-items-center rounded-[7px] border-2 border-tcb08-line bg-white/[0.02] text-tcb08-neon transition-colors duration-300 peer-checked:border-tcb08-neon peer-checked:bg-tcb08-neon/10 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb08-neon before:pointer-events-none before:absolute before:-inset-px before:rounded-[7px] before:opacity-0 before:shadow-tcb08-glow before:transition-opacity before:duration-300 before:content-[''] group-has-checked:before:animate-tcb08-pulse group-has-checked:before:opacity-100 motion-reduce:transition-none motion-reduce:before:animate-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-[15px] scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="text-[15px] tracking-[0.01em] transition-colors group-has-checked:text-white">Overclock profile</span></label>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 rounded-xl px-3.5 transition-colors hover:bg-white/[0.04]"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="relative grid size-6 flex-none place-items-center rounded-[7px] border-2 border-tcb08-line bg-white/[0.02] text-tcb08-neon transition-colors duration-300 peer-checked:border-tcb08-neon peer-checked:bg-tcb08-neon/10 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb08-neon before:pointer-events-none before:absolute before:-inset-px before:rounded-[7px] before:opacity-0 before:shadow-tcb08-glow before:transition-opacity before:duration-300 before:content-[''] group-has-checked:before:animate-tcb08-pulse group-has-checked:before:opacity-100 motion-reduce:transition-none motion-reduce:before:animate-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-[15px] scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="text-[15px] tracking-[0.01em] transition-colors group-has-checked:text-white">Low-latency mode</span></label>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcb08-bg: #0a0d11;
  --color-tcb08-bg: oklch(0.16 0.01 250);
  --color-tcb08-glowbg: #141b22;
  --color-tcb08-glowbg: oklch(0.22 0.015 245);
  --color-tcb08-ink: #b6c0ca;
  --color-tcb08-ink: oklch(0.8 0.02 245);
  --color-tcb08-line: #3a4652;
  --color-tcb08-line: oklch(0.4 0.025 245);
  --color-tcb08-neon: #00ffcc;
  --color-tcb08-neon: oklch(0.9 0.18 172);
  --font-tcb08-sans: 'Space Grotesk', system-ui, sans-serif;
  --shadow-tcb08-glow: 0 0 6px #00ffcc, 0 0 14px #00ffcc, 0 0 26px rgb(0 255 204 / 0.8), inset 0 0 8px rgb(0 255 204 / 0.5);
  --animate-tcb08-pulse: tcb08-pulse 2.4s ease-in-out infinite;

  @keyframes tcb08-pulse {
    0%,
        100% {
      opacity: 0.7;
    }

    50% {
      opacity: 1;
    }
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tcb-08 {
  width: 100%;
  min-height: 100svh;
}

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-tcb08-bg: #0a0d11;
  --color-tcb08-bg: oklch(0.16 0.01 250);
  --color-tcb08-glowbg: #141b22;
  --color-tcb08-glowbg: oklch(0.22 0.015 245);
  --color-tcb08-ink: #b6c0ca;
  --color-tcb08-ink: oklch(0.8 0.02 245);
  --color-tcb08-line: #3a4652;
  --color-tcb08-line: oklch(0.4 0.025 245);
  --color-tcb08-neon: #00ffcc;
  --color-tcb08-neon: oklch(0.9 0.18 172);
  --font-tcb08-sans: 'Space Grotesk', system-ui, sans-serif;
  --shadow-tcb08-glow: 0 0 6px #00ffcc, 0 0 14px #00ffcc, 0 0 26px rgb(0 255 204 / 0.8), inset 0 0 8px rgb(0 255 204 / 0.5);
  --animate-tcb08-pulse: tcb08-pulse 2.4s ease-in-out infinite;

  @keyframes tcb08-pulse {
    0%,
        100% {
      opacity: 0.7;
    }

    50% {
      opacity: 1;
    }
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tcb-08 {
  width: 100%;
  min-height: 100svh;
}
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=Space+Grotesk:wght@400;500;600;700&display=swap">

What changed in the port

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

  • The ::before glow and its :checked pulse rule became before:shadow-tcb08-glow + group-has-checked:before:animate-tcb08-pulse.
  • rgba(255,255,255,.03) became bg-white/[0.03] — the opacity modifier accepts arbitrary values.
  • UI upgrade from the CSS original: rows now tint on hover, the checked label brightens to white, and the panel carries a neon section label.
  • UI upgrade: reduced-motion users keep the static glow instead of losing it entirely; the tick now uses the neon colour via currentColor.
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: Neon Glow Checkbox in Tailwind CSS — Dark Mode Gaming UI
Source: https://codefronts.com/components/tailwind-css-checkboxes/neon-glow-checkbox-tailwind-dark-mode/

A cyan glow that breathes around every checked box: a layered shadow-tcb08-glow token on a before: pseudo-element, pulsed with animate-tcb08-pulse — opacity only, so the glow never repaints the layout. Checked labels brighten to full white.
## HTML
```html
<section class="tcb-08 w-full min-h-svh grid place-items-center bg-tcb08-bg bg-[radial-gradient(120%_120%_at_50%_0%,var(--color-tcb08-glowbg),transparent_70%)] px-5 py-14 font-tcb08-sans text-tcb08-ink selection:bg-tcb08-neon selection:text-tcb08-bg" aria-label="Neon glow checkboxes">
  <div class="w-full max-w-[25rem] rounded-2xl border border-white/10 bg-white/[0.03] p-3.5">
    <p class="px-3.5 pb-2 pt-1 text-[11px] font-bold uppercase tracking-[0.2em] text-tcb08-neon">Performance</p>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 rounded-xl px-3.5 transition-colors hover:bg-white/[0.04]"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="relative grid size-6 flex-none place-items-center rounded-[7px] border-2 border-tcb08-line bg-white/[0.02] text-tcb08-neon transition-colors duration-300 peer-checked:border-tcb08-neon peer-checked:bg-tcb08-neon/10 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb08-neon before:pointer-events-none before:absolute before:-inset-px before:rounded-[7px] before:opacity-0 before:shadow-tcb08-glow before:transition-opacity before:duration-300 before:content-[''] group-has-checked:before:animate-tcb08-pulse group-has-checked:before:opacity-100 motion-reduce:transition-none motion-reduce:before:animate-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-[15px] scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="text-[15px] tracking-[0.01em] transition-colors group-has-checked:text-white">Enable RGB sync</span></label>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 rounded-xl px-3.5 transition-colors hover:bg-white/[0.04]"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="relative grid size-6 flex-none place-items-center rounded-[7px] border-2 border-tcb08-line bg-white/[0.02] text-tcb08-neon transition-colors duration-300 peer-checked:border-tcb08-neon peer-checked:bg-tcb08-neon/10 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb08-neon before:pointer-events-none before:absolute before:-inset-px before:rounded-[7px] before:opacity-0 before:shadow-tcb08-glow before:transition-opacity before:duration-300 before:content-[''] group-has-checked:before:animate-tcb08-pulse group-has-checked:before:opacity-100 motion-reduce:transition-none motion-reduce:before:animate-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-[15px] scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="text-[15px] tracking-[0.01em] transition-colors group-has-checked:text-white">Overclock profile</span></label>
    <label class="group flex min-h-12 cursor-pointer items-center gap-3.5 rounded-xl px-3.5 transition-colors hover:bg-white/[0.04]"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="relative grid size-6 flex-none place-items-center rounded-[7px] border-2 border-tcb08-line bg-white/[0.02] text-tcb08-neon transition-colors duration-300 peer-checked:border-tcb08-neon peer-checked:bg-tcb08-neon/10 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-tcb08-neon before:pointer-events-none before:absolute before:-inset-px before:rounded-[7px] before:opacity-0 before:shadow-tcb08-glow before:transition-opacity before:duration-300 before:content-[''] group-has-checked:before:animate-tcb08-pulse group-has-checked:before:opacity-100 motion-reduce:transition-none motion-reduce:before:animate-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-[15px] scale-50 opacity-0 transition duration-200 ease-[cubic-bezier(.2,.9,.3,1.3)] group-has-checked:scale-100 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="text-[15px] tracking-[0.01em] transition-colors group-has-checked:text-white">Low-latency mode</span></label>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb08-bg: #0a0d11;
  --color-tcb08-bg: oklch(0.16 0.01 250);
  --color-tcb08-glowbg: #141b22;
  --color-tcb08-glowbg: oklch(0.22 0.015 245);
  --color-tcb08-ink: #b6c0ca;
  --color-tcb08-ink: oklch(0.8 0.02 245);
  --color-tcb08-line: #3a4652;
  --color-tcb08-line: oklch(0.4 0.025 245);
  --color-tcb08-neon: #00ffcc;
  --color-tcb08-neon: oklch(0.9 0.18 172);
  --font-tcb08-sans: 'Space Grotesk', system-ui, sans-serif;
  --shadow-tcb08-glow: 0 0 6px #00ffcc, 0 0 14px #00ffcc, 0 0 26px rgb(0 255 204 / 0.8), inset 0 0 8px rgb(0 255 204 / 0.5);
  --animate-tcb08-pulse: tcb08-pulse 2.4s ease-in-out infinite;

  @keyframes tcb08-pulse {
    0%,
        100% {
      opacity: 0.7;
    }

    50% {
      opacity: 1;
    }
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tcb-08 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Glow on a pseudo-element. Animating box-shadow repaints every frame; animating the opacity of a pseudo-element that carries the shadow is composited. The glow lives on before: with before:shadow-tcb08-glow and only its opacity pulses.

Token-minted animation. --animate-tcb08-pulse in @theme mints animate-tcb08-pulse; its @keyframes sit inside @theme and are emitted only because a utility uses them.

Make it yours

  • Colour: edit --color-tcb08-neon and the rgb in --shadow-tcb08-glow.
  • Calmer: remove the pulse and keep the static glow.
  • Magenta variant: #ff2e97 neon on a #140a12 stage.
  • Scanlines: add bg-[repeating-linear-gradient(…)] to the panel.

Gotchas — read before shipping

  • Glows reduce legibility — keep label text off the glow colour.
  • motion-reduce:before:animate-none keeps the static glow for reduced-motion users.
  • Heavy multi-layer shadows on dozens of rows can cost paint time on low-end phones.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Box-shadow and keyframes are universal.

Techniques used in this demo

Utilitiesfirst-class utility or variant

pseudo elementstw ↗radial-gradient()tw ↗

Arbitraryneeds bracket syntax

box shadow glowtw ↗

Plain CSSno Tailwind surface

@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →