29 Tailwind CSS Checkboxes
15 / 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

Brutalist Checkbox in Tailwind CSS — Neo-Brutalism Hard Shadow

Thick black borders, a 4px offset shadow and a box that physically presses into its shadow on check (group-has-checked:translate-1 shadow-none). New: the checked label gets a yellow marker highlight with box-decoration-clone, so the whole row shouts its state.

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-15 w-full min-h-svh grid place-items-center bg-tcb15-bg px-5 py-14 font-tcb15-display text-black selection:bg-black selection:text-tcb15-acc" aria-label="Brutalist checkboxes">
  <div class="w-full max-w-[25rem] border-4 border-black bg-white p-2 shadow-tcb15-panel">
    <p class="border-b-4 border-black px-3 pb-2 pt-1 font-tcb15-mono text-xs font-bold uppercase tracking-[0.14em]">Release checklist</p>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 px-3"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-7 flex-none place-items-center border-4 border-black bg-white shadow-tcb15-hard transition duration-75 ease-linear group-hover:-translate-0.5 group-hover:shadow-tcb15-lift peer-checked:translate-1 peer-checked:bg-tcb15-acc peer-checked:shadow-none peer-focus-visible:outline-4 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-black motion-reduce:translate-0 motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="size-4 opacity-0 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="px-1 text-base tracking-[0.04em] box-decoration-clone group-has-checked:bg-tcb15-acc">SHIP IT</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 px-3"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-7 flex-none place-items-center border-4 border-black bg-white shadow-tcb15-hard transition duration-75 ease-linear group-hover:-translate-0.5 group-hover:shadow-tcb15-lift peer-checked:translate-1 peer-checked:bg-tcb15-acc peer-checked:shadow-none peer-focus-visible:outline-4 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-black motion-reduce:translate-0 motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="size-4 opacity-0 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="px-1 text-base tracking-[0.04em] box-decoration-clone group-has-checked:bg-tcb15-acc">BREAK THINGS</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 px-3"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-7 flex-none place-items-center border-4 border-black bg-white shadow-tcb15-hard transition duration-75 ease-linear group-hover:-translate-0.5 group-hover:shadow-tcb15-lift peer-checked:translate-1 peer-checked:bg-tcb15-acc peer-checked:shadow-none peer-focus-visible:outline-4 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-black motion-reduce:translate-0 motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="size-4 opacity-0 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="px-1 text-base tracking-[0.04em] box-decoration-clone group-has-checked:bg-tcb15-acc">NO REGRETS</span></label>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcb15-bg: #e8e6df;
  --color-tcb15-bg: oklch(0.92 0.008 90);
  --color-tcb15-acc: #f7ff37;
  --color-tcb15-acc: oklch(0.96 0.2 110);
  --font-tcb15-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-tcb15-mono: 'Space Mono', ui-monospace, monospace;
  --shadow-tcb15-panel: 8px 8px 0 #000;
  --shadow-tcb15-hard: 4px 4px 0 #000;
  --shadow-tcb15-lift: 6px 6px 0 #000;
}
/* 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-15 {
  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-tcb15-bg: #e8e6df;
  --color-tcb15-bg: oklch(0.92 0.008 90);
  --color-tcb15-acc: #f7ff37;
  --color-tcb15-acc: oklch(0.96 0.2 110);
  --font-tcb15-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-tcb15-mono: 'Space Mono', ui-monospace, monospace;
  --shadow-tcb15-panel: 8px 8px 0 #000;
  --shadow-tcb15-hard: 4px 4px 0 #000;
  --shadow-tcb15-lift: 6px 6px 0 #000;
}
/* 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-15 {
  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=Archivo+Black&family=Space+Mono:wght@400;700&display=swap">

What changed in the port

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

  • transform:translate(4px,4px);box-shadow:0 0 0 #000 became peer-checked:translate-1 peer-checked:shadow-none.
  • The 'Arial Black' stack became Archivo Black from Google Fonts, so the look no longer depends on a Windows system font.
  • UI upgrade from the CSS original: hover lifts the box (bigger shadow) before the press, and checked labels get a marker highlight so the entire row carries state.
  • UI upgrade: a mono header labels the list, and rows are 60px tall.
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: Brutalist Checkbox in Tailwind CSS — Neo-Brutalism Hard Shadow
Source: https://codefronts.com/components/tailwind-css-checkboxes/brutalist-checkbox-tailwind-neo-brutalism/

Thick black borders, a 4px offset shadow and a box that physically presses into its shadow on check (group-has-checked:translate-1 shadow-none). New: the checked label gets a yellow marker highlight with box-decoration-clone, so the whole row shouts its state.
## HTML
```html
<section class="tcb-15 w-full min-h-svh grid place-items-center bg-tcb15-bg px-5 py-14 font-tcb15-display text-black selection:bg-black selection:text-tcb15-acc" aria-label="Brutalist checkboxes">
  <div class="w-full max-w-[25rem] border-4 border-black bg-white p-2 shadow-tcb15-panel">
    <p class="border-b-4 border-black px-3 pb-2 pt-1 font-tcb15-mono text-xs font-bold uppercase tracking-[0.14em]">Release checklist</p>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 px-3"><input type="checkbox" class="peer sr-only" checked><span aria-hidden="true" class="grid size-7 flex-none place-items-center border-4 border-black bg-white shadow-tcb15-hard transition duration-75 ease-linear group-hover:-translate-0.5 group-hover:shadow-tcb15-lift peer-checked:translate-1 peer-checked:bg-tcb15-acc peer-checked:shadow-none peer-focus-visible:outline-4 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-black motion-reduce:translate-0 motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="size-4 opacity-0 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="px-1 text-base tracking-[0.04em] box-decoration-clone group-has-checked:bg-tcb15-acc">SHIP IT</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 px-3"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-7 flex-none place-items-center border-4 border-black bg-white shadow-tcb15-hard transition duration-75 ease-linear group-hover:-translate-0.5 group-hover:shadow-tcb15-lift peer-checked:translate-1 peer-checked:bg-tcb15-acc peer-checked:shadow-none peer-focus-visible:outline-4 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-black motion-reduce:translate-0 motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="size-4 opacity-0 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="px-1 text-base tracking-[0.04em] box-decoration-clone group-has-checked:bg-tcb15-acc">BREAK THINGS</span></label>
    <label class="group flex min-h-15 cursor-pointer items-center gap-4 px-3"><input type="checkbox" class="peer sr-only"><span aria-hidden="true" class="grid size-7 flex-none place-items-center border-4 border-black bg-white shadow-tcb15-hard transition duration-75 ease-linear group-hover:-translate-0.5 group-hover:shadow-tcb15-lift peer-checked:translate-1 peer-checked:bg-tcb15-acc peer-checked:shadow-none peer-focus-visible:outline-4 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-black motion-reduce:translate-0 motion-reduce:transition-none"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="size-4 opacity-0 group-has-checked:opacity-100"><path d="M20 6 9 17l-5-5"/></svg></span><span class="px-1 text-base tracking-[0.04em] box-decoration-clone group-has-checked:bg-tcb15-acc">NO REGRETS</span></label>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcb15-bg: #e8e6df;
  --color-tcb15-bg: oklch(0.92 0.008 90);
  --color-tcb15-acc: #f7ff37;
  --color-tcb15-acc: oklch(0.96 0.2 110);
  --font-tcb15-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-tcb15-mono: 'Space Mono', ui-monospace, monospace;
  --shadow-tcb15-panel: 8px 8px 0 #000;
  --shadow-tcb15-hard: 4px 4px 0 #000;
  --shadow-tcb15-lift: 6px 6px 0 #000;
}
/* 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-15 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

The press is geometry. Moving the box 4px down-right while removing its 4px shadow makes it look pushed into the page — the shadow is exactly the travel.

Hover invites it. group-hover:-translate-0.5 lifts the box and grows its shadow before the press.

Marker label. The label span gets the accent background on check; box-decoration-clone keeps padding on wrapped lines.

Make it yours

  • Colour pop: swap --color-tcb15-acc for hot pink #ff5fa2.
  • Bigger shadow: 6px shadow token + translate-1.5.
  • Rotate the panel -rotate-1 for a sticker look.
  • Remove the marker for a quieter list.

Gotchas — read before shipping

  • Brutalism depends on pure black; don't soften it to gray-900 or the style collapses.
  • The accent yellow fails as text colour — use it only as background under black ink.
  • Reduced motion removes the press translate but keeps the fill.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

box-decoration-break is unprefixed in Chrome 130; Tailwind emits the -webkit- prefix.

Techniques used in this demo

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →