20 Tailwind CSS Claymorphism
15 / 20

All 20 in 20 Tailwind CSS Claymorphism

  1. 01Tailwind CSS Claymorphism Box Shadow Recipe (3-Layer Formula)
  2. 02Tailwind Inner Shadow & Inset Highlight for Clay UI
  3. 03Tailwind Border Radius Scale & Squircle Corners for Puffy Shapes
  4. 04Claymorphism vs Neumorphism in Tailwind CSS (Side-by-Side)
  5. 05Tailwind Glassmorphism + Claymorphism Hybrid Card
  6. 06Tailwind Clay UI Light Source & Shadow Direction System
  7. 07Tailwind Elevation Shadow Scale: Clay Depth Tiers
  8. 08Tailwind CSS v4 Claymorphism: @theme Tokens, @utility & Arbitrary Values
  9. 09Tailwind 3D Clay Button with Press & Squish Animation
  10. 10Tailwind Toggle Switch, Checkbox & Segmented Control (Clay Style)
  11. 11Tailwind Search Bar & Floating Label Input (Clay Inset Style)
  12. 12Tailwind Badge & Pill Tag Components (Clay Style)
  13. 13Tailwind Claymorphism Card Component (Container Query Responsive)
  14. 14Tailwind Modal Dialog with Popover API (Clay Floating Depth)
  15. 15Tailwind Pricing Table with Monthly/Yearly Toggle (Clay Style)
  16. 16Tailwind Mobile Bottom Navigation Bar (Clay Tab Bar)
  17. 17Tailwind App Icon Grid with 3D Hover Tilt (Clay Tiles)
  18. 18Tailwind Toast Notification & Alert Components (Clay Style)
  19. 19Tailwind Dark Mode Claymorphism: Shadow Recalibration with light-dark()
  20. 20Tailwind Animation Performance: GPU Transform vs Box-Shadow (Live FPS Meter)
Pure TailwindMIT licensed

Tailwind Pricing Table with Monthly/Yearly Toggle (Clay Style)

Three plans where hierarchy comes from depth, not a coloured border: the popular tier floats a full elevation tier above its neighbours, is physically larger, and wears a clay ribbon. The billing switch is a checkbox read by group-has-[#tcl-15-billing:checked]/demo:, so prices change with no script. New: yearly shows the monthly equivalent with a "billed $182 yearly" line — the pattern buyers compare on.

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="tcl-15 group/demo w-full min-h-svh grid place-items-center bg-tcl15-bg bg-[radial-gradient(85%_55%_at_50%_0%,var(--color-tcl15-glow),transparent_66%)] px-5 py-14 font-tcl15-sans text-tcl15-ink" aria-label="Clay pricing table with raised popular tier demo">
  <div class="grid w-full justify-items-center gap-[clamp(26px,4vw,40px)]">
    <header class="grid justify-items-center gap-4.5 text-center">
      <h2 class="font-tcl15-display text-[clamp(28px,4.2vw,42px)] font-extrabold leading-[1.05] tracking-[-0.03em] text-balance">Plans that feel their weight</h2>
      <label class="inline-flex min-h-13 cursor-pointer items-center gap-3.5 rounded-full bg-tcl15-soft px-5 text-sm font-semibold shadow-tcl15-pill has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcl15-ink">
        <span class="text-tcl15-ink transition-colors group-has-[#tcl-15-billing:checked]/demo:text-tcl15-mut">Monthly</span>
        <input type="checkbox" role="switch" id="tcl-15-billing" class="peer sr-only" aria-label="Bill yearly">
        <span aria-hidden="true" class="relative h-7.5 w-13 rounded-full bg-tcl15-well shadow-tcl15-track">
          <span class="absolute top-0.75 left-0.75 size-6 rounded-full bg-white shadow-tcl15-knob transition-[translate,background-color] duration-300 ease-[cubic-bezier(.34,1.5,.5,1)] group-has-[#tcl-15-billing:checked]/demo:translate-x-5.5 group-has-[#tcl-15-billing:checked]/demo:bg-tcl15-accent motion-reduce:transition-none"></span>
        </span>
        <span class="inline-flex items-center gap-2 text-tcl15-mut transition-colors group-has-[#tcl-15-billing:checked]/demo:text-tcl15-ink">Yearly <b class="rounded-full bg-tcl15-accent/45 px-2.25 py-1.25 text-[10.5px] font-bold uppercase tracking-[0.08em] text-tcl15-ink opacity-60 transition-[opacity,scale] duration-300 ease-[cubic-bezier(.34,1.5,.5,1)] group-has-[#tcl-15-billing:checked]/demo:scale-106 group-has-[#tcl-15-billing:checked]/demo:opacity-100">save 20%</b></span>
      </label>
    </header>
    <div class="grid w-full max-w-[1020px] grid-cols-[repeat(auto-fit,minmax(250px,1fr))] items-center gap-[clamp(20px,3vw,28px)]">
      <article class="grid content-start gap-2.75 rounded-[38px] bg-tcl15-clay p-[clamp(24px,3vw,32px)] shadow-tcl15-tier2 transition-[translate] duration-[400ms] ease-[cubic-bezier(.34,1.3,.5,1)] hover:-translate-y-1.5">
        <p class="text-xs font-bold uppercase tracking-[0.15em] text-tcl15-ink/70">Starter</p>
        <p class="font-tcl15-display text-[clamp(32px,4.4vw,42px)] leading-none font-extrabold tracking-[-0.04em] tabular-nums">$0<em class="text-[15px] font-semibold not-italic tracking-normal text-tcl15-mut">/mo</em></p>
        <p class="text-[12.5px] text-tcl15-mut">Free forever</p>
        <p class="text-[13.5px] leading-normal text-tcl15-ink/85 text-pretty">Every snippet, no account needed.</p>
        <ul class="mt-1.5 mb-0.5 grid gap-1.75 rounded-3xl bg-tcl15-well px-4.5 py-4 text-[13.5px] shadow-tcl15-feats">
          <li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">All 20 demos</li><li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Copy any snippet</li><li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Community support</li>
        </ul>
        <button type="button" class="mt-1.5 min-h-13 cursor-pointer rounded-3xl bg-tcl15-soft px-5.5 text-[14.5px] font-bold shadow-tcl15-btn transition-[translate,scale,box-shadow] duration-200 ease-[cubic-bezier(.2,.8,.3,1.4)] hover:-translate-y-0.75 active:translate-y-0.75 active:scale-y-94 active:shadow-tcl15-press focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-tcl15-ink">Start free</button>
      </article>
      <article class="relative z-10 grid content-start gap-2.75 rounded-[38px] bg-tcl15-pop p-[clamp(24px,3vw,32px)] pt-[clamp(32px,3.6vw,42px)] shadow-tcl15-tier4 transition-[translate] duration-[400ms] ease-[cubic-bezier(.34,1.3,.5,1)] hover:-translate-y-2.5 md:scale-104">
        <span class="absolute -top-3.5 left-1/2 -translate-x-1/2 rounded-full bg-tcl15-ribbon px-4 py-2 text-[11px] font-bold uppercase tracking-[0.12em] whitespace-nowrap text-white shadow-tcl15-ribbon">Most popular</span>
        <p class="text-xs font-bold uppercase tracking-[0.15em] text-tcl15-ink/70">Pro</p>
        <p class="font-tcl15-display text-[clamp(32px,4.4vw,42px)] leading-none font-extrabold tracking-[-0.04em] tabular-nums"><span class="group-has-[#tcl-15-billing:checked]/demo:hidden">$19</span><span class="hidden group-has-[#tcl-15-billing:checked]/demo:inline">$15</span><em class="text-[15px] font-semibold not-italic tracking-normal text-tcl15-ink/70">/mo</em></p>
        <p class="text-[12.5px] text-tcl15-ink/75"><span class="group-has-[#tcl-15-billing:checked]/demo:hidden">Billed monthly</span><span class="hidden group-has-[#tcl-15-billing:checked]/demo:inline">Billed $182 yearly</span></p>
        <p class="text-[13.5px] leading-normal text-tcl15-ink/85 text-pretty">Figma tokens, dark-mode variants and the clay generator.</p>
        <ul class="mt-1.5 mb-0.5 grid gap-1.75 rounded-3xl bg-tcl15-popwell px-4.5 py-4 text-[13.5px] shadow-tcl15-feats">
          <li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Token &amp; Tailwind presets</li><li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Dark-mode recalibration</li><li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Figma clay library</li><li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Priority answers</li>
        </ul>
        <button type="button" class="mt-1.5 min-h-13 cursor-pointer rounded-3xl bg-tcl15-accent px-5.5 text-[14.5px] font-bold text-tcl15-accentink shadow-tcl15-btn transition-[translate,scale,box-shadow] duration-200 ease-[cubic-bezier(.2,.8,.3,1.4)] hover:-translate-y-0.75 active:translate-y-0.75 active:scale-y-94 active:shadow-tcl15-press focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-tcl15-ink">Get Pro</button>
      </article>
      <article class="grid content-start gap-2.75 rounded-[38px] bg-tcl15-clay p-[clamp(24px,3vw,32px)] shadow-tcl15-tier2 transition-[translate] duration-[400ms] ease-[cubic-bezier(.34,1.3,.5,1)] hover:-translate-y-1.5">
        <p class="text-xs font-bold uppercase tracking-[0.15em] text-tcl15-ink/70">Team</p>
        <p class="font-tcl15-display text-[clamp(32px,4.4vw,42px)] leading-none font-extrabold tracking-[-0.04em] tabular-nums"><span class="group-has-[#tcl-15-billing:checked]/demo:hidden">$49</span><span class="hidden group-has-[#tcl-15-billing:checked]/demo:inline">$39</span><em class="text-[15px] font-semibold not-italic tracking-normal text-tcl15-mut">/mo</em></p>
        <p class="text-[12.5px] text-tcl15-mut"><span class="group-has-[#tcl-15-billing:checked]/demo:hidden">Billed monthly</span><span class="hidden group-has-[#tcl-15-billing:checked]/demo:inline">Billed $470 yearly</span></p>
        <p class="text-[13.5px] leading-normal text-tcl15-ink/85 text-pretty">Shared design tokens for the whole product team.</p>
        <ul class="mt-1.5 mb-0.5 grid gap-1.75 rounded-3xl bg-tcl15-well px-4.5 py-4 text-[13.5px] shadow-tcl15-feats">
          <li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">10 seats</li><li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Design-system audit</li><li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Onboarding session</li>
        </ul>
        <button type="button" class="mt-1.5 min-h-13 cursor-pointer rounded-3xl bg-tcl15-soft px-5.5 text-[14.5px] font-bold shadow-tcl15-btn transition-[translate,scale,box-shadow] duration-200 ease-[cubic-bezier(.2,.8,.3,1.4)] hover:-translate-y-0.75 active:translate-y-0.75 active:scale-y-94 active:shadow-tcl15-press focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-tcl15-ink">Talk to us</button>
      </article>
    </div>
    <p aria-hidden="true" class="rounded-full bg-white/55 px-4 py-2 text-center font-tcl15-mono text-[11.5px] text-tcl15-mut">hierarchy from elevation + scale · group-has-[#billing:checked]/demo: price swap · tabular-nums</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcl15-bg: #deedfe;
  --color-tcl15-bg: oklch(0.94 0.028 250);
  --color-tcl15-glow: #e4f8ff;
  --color-tcl15-glow: oklch(0.97 0.03 240);
  --color-tcl15-clay: #c8e1fb;
  --color-tcl15-clay: oklch(0.9 0.045 250);
  --color-tcl15-pop: #9fe4fa;
  --color-tcl15-pop: oklch(0.88 0.075 220);
  --color-tcl15-soft: #e2f0ff;
  --color-tcl15-soft: oklch(0.95 0.025 250);
  --color-tcl15-well: #bfd7f1;
  --color-tcl15-well: oklch(0.87 0.045 250);
  --color-tcl15-popwell: #9bd9ef;
  --color-tcl15-popwell: oklch(0.85 0.07 222);
  --color-tcl15-accent: #34dde5;
  --color-tcl15-accent: oklch(0.82 0.13 200);
  --color-tcl15-accentink: #002735;
  --color-tcl15-accentink: oklch(0.25 0.06 220);
  --color-tcl15-ribbon: #065da0;
  --color-tcl15-ribbon: oklch(0.47 0.13 250);
  --color-tcl15-dot: #00878f;
  --color-tcl15-dot: oklch(0.55 0.13 200);
  --color-tcl15-shade: #416f9e80;
  --color-tcl15-shade: oklch(0.53 0.09 250 / 0.5);
  --color-tcl15-light: #f9fffff2;
  --color-tcl15-light: oklch(1 0.012 250 / 0.95);
  --color-tcl15-ink: #0f253b;
  --color-tcl15-ink: oklch(0.26 0.05 250);
  --color-tcl15-mut: #42576e;
  --color-tcl15-mut: oklch(0.45 0.045 250);
  --font-tcl15-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-tcl15-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tcl15-mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow-tcl15-tier2: 0 18px 34px -8px var(--color-tcl15-shade), inset 0 -8px 16px -8px var(--color-tcl15-shade), inset 0 10px 16px -6px var(--color-tcl15-light);
  --shadow-tcl15-tier4: 0 36px 68px -16px var(--color-tcl15-shade), inset 0 -16px 32px -8px var(--color-tcl15-shade), inset 0 20px 32px -6px var(--color-tcl15-light);
  --shadow-tcl15-pill: 0 14px 24px -16px var(--color-tcl15-shade), inset 0 -9px 15px -11px var(--color-tcl15-shade), inset 0 11px 15px -8px var(--color-tcl15-light);
  --shadow-tcl15-track: inset 0 8px 14px -6px var(--color-tcl15-shade), inset 0 -5px 10px -8px var(--color-tcl15-light);
  --shadow-tcl15-knob: 0 7px 12px -5px var(--color-tcl15-shade), inset 0 -5px 8px -6px var(--color-tcl15-shade), inset 0 7px 9px -5px var(--color-tcl15-light);
  --shadow-tcl15-feats: inset 0 9px 16px -8px var(--color-tcl15-shade), inset 0 -6px 12px -10px var(--color-tcl15-light);
  --shadow-tcl15-btn: 0 14px 22px -12px var(--color-tcl15-shade), inset 0 -10px 16px -9px var(--color-tcl15-shade), inset 0 12px 16px -7px var(--color-tcl15-light);
  --shadow-tcl15-press: 0 0 0 0 transparent, inset 0 12px 18px -8px var(--color-tcl15-shade), inset 0 -6px 12px -9px var(--color-tcl15-light);
  --shadow-tcl15-ribbon: 0 12px 20px -8px var(--color-tcl15-shade), inset 0 -5px 9px -6px oklch(0 0 0 / 0.4), inset 0 7px 9px -5px oklch(1 0 0 / 0.45);
}
/* 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. */

.tcl-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-tcl15-bg: #deedfe;
  --color-tcl15-bg: oklch(0.94 0.028 250);
  --color-tcl15-glow: #e4f8ff;
  --color-tcl15-glow: oklch(0.97 0.03 240);
  --color-tcl15-clay: #c8e1fb;
  --color-tcl15-clay: oklch(0.9 0.045 250);
  --color-tcl15-pop: #9fe4fa;
  --color-tcl15-pop: oklch(0.88 0.075 220);
  --color-tcl15-soft: #e2f0ff;
  --color-tcl15-soft: oklch(0.95 0.025 250);
  --color-tcl15-well: #bfd7f1;
  --color-tcl15-well: oklch(0.87 0.045 250);
  --color-tcl15-popwell: #9bd9ef;
  --color-tcl15-popwell: oklch(0.85 0.07 222);
  --color-tcl15-accent: #34dde5;
  --color-tcl15-accent: oklch(0.82 0.13 200);
  --color-tcl15-accentink: #002735;
  --color-tcl15-accentink: oklch(0.25 0.06 220);
  --color-tcl15-ribbon: #065da0;
  --color-tcl15-ribbon: oklch(0.47 0.13 250);
  --color-tcl15-dot: #00878f;
  --color-tcl15-dot: oklch(0.55 0.13 200);
  --color-tcl15-shade: #416f9e80;
  --color-tcl15-shade: oklch(0.53 0.09 250 / 0.5);
  --color-tcl15-light: #f9fffff2;
  --color-tcl15-light: oklch(1 0.012 250 / 0.95);
  --color-tcl15-ink: #0f253b;
  --color-tcl15-ink: oklch(0.26 0.05 250);
  --color-tcl15-mut: #42576e;
  --color-tcl15-mut: oklch(0.45 0.045 250);
  --font-tcl15-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-tcl15-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tcl15-mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow-tcl15-tier2: 0 18px 34px -8px var(--color-tcl15-shade), inset 0 -8px 16px -8px var(--color-tcl15-shade), inset 0 10px 16px -6px var(--color-tcl15-light);
  --shadow-tcl15-tier4: 0 36px 68px -16px var(--color-tcl15-shade), inset 0 -16px 32px -8px var(--color-tcl15-shade), inset 0 20px 32px -6px var(--color-tcl15-light);
  --shadow-tcl15-pill: 0 14px 24px -16px var(--color-tcl15-shade), inset 0 -9px 15px -11px var(--color-tcl15-shade), inset 0 11px 15px -8px var(--color-tcl15-light);
  --shadow-tcl15-track: inset 0 8px 14px -6px var(--color-tcl15-shade), inset 0 -5px 10px -8px var(--color-tcl15-light);
  --shadow-tcl15-knob: 0 7px 12px -5px var(--color-tcl15-shade), inset 0 -5px 8px -6px var(--color-tcl15-shade), inset 0 7px 9px -5px var(--color-tcl15-light);
  --shadow-tcl15-feats: inset 0 9px 16px -8px var(--color-tcl15-shade), inset 0 -6px 12px -10px var(--color-tcl15-light);
  --shadow-tcl15-btn: 0 14px 22px -12px var(--color-tcl15-shade), inset 0 -10px 16px -9px var(--color-tcl15-shade), inset 0 12px 16px -7px var(--color-tcl15-light);
  --shadow-tcl15-press: 0 0 0 0 transparent, inset 0 12px 18px -8px var(--color-tcl15-shade), inset 0 -6px 12px -9px var(--color-tcl15-light);
  --shadow-tcl15-ribbon: 0 12px 20px -8px var(--color-tcl15-shade), inset 0 -5px 9px -6px oklch(0 0 0 / 0.4), inset 0 7px 9px -5px oklch(1 0 0 / 0.45);
}
/* 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. */

.tcl-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=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap">

What changed in the port

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

  • The --elev calc shadows became two named tokens (tier2, tier4) — a pricing table only ever needs two tiers.
  • .cl-15:has(#billing:checked) .mo{display:none} became group-has-[#tcl-15-billing:checked]/demo:hidden on every span that changes, including the new billing lines.
  • UI upgrade from the CSS original: yearly now shows the monthly equivalent ($15/mo, $39/mo) with "Billed $182 yearly" beneath, so plans compare at the same unit; the switch is a labelled role="switch".
  • UI upgrade: the popular card's scale-104 is gated to md: so it no longer overflows a single-column phone layout, and muted copy rose to 5.5:1.
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 Pricing Table with Monthly/Yearly Toggle (Clay Style)
Source: https://codefronts.com/design-styles/tailwind-css-claymorphism/tailwind-pricing-table-monthly-yearly-toggle-clay/

Three plans where hierarchy comes from depth, not a coloured border: the popular tier floats a full elevation tier above its neighbours, is physically larger, and wears a clay ribbon. The billing switch is a checkbox read by group-has-[#tcl-15-billing:checked]/demo:, so prices change with no script. New: yearly shows the monthly equivalent with a "billed $182 yearly" line — the pattern buyers compare on.
## HTML
```html
<section class="tcl-15 group/demo w-full min-h-svh grid place-items-center bg-tcl15-bg bg-[radial-gradient(85%_55%_at_50%_0%,var(--color-tcl15-glow),transparent_66%)] px-5 py-14 font-tcl15-sans text-tcl15-ink" aria-label="Clay pricing table with raised popular tier demo">
  <div class="grid w-full justify-items-center gap-[clamp(26px,4vw,40px)]">
    <header class="grid justify-items-center gap-4.5 text-center">
      <h2 class="font-tcl15-display text-[clamp(28px,4.2vw,42px)] font-extrabold leading-[1.05] tracking-[-0.03em] text-balance">Plans that feel their weight</h2>
      <label class="inline-flex min-h-13 cursor-pointer items-center gap-3.5 rounded-full bg-tcl15-soft px-5 text-sm font-semibold shadow-tcl15-pill has-focus-visible:outline-3 has-focus-visible:outline-offset-3 has-focus-visible:outline-tcl15-ink">
        <span class="text-tcl15-ink transition-colors group-has-[#tcl-15-billing:checked]/demo:text-tcl15-mut">Monthly</span>
        <input type="checkbox" role="switch" id="tcl-15-billing" class="peer sr-only" aria-label="Bill yearly">
        <span aria-hidden="true" class="relative h-7.5 w-13 rounded-full bg-tcl15-well shadow-tcl15-track">
          <span class="absolute top-0.75 left-0.75 size-6 rounded-full bg-white shadow-tcl15-knob transition-[translate,background-color] duration-300 ease-[cubic-bezier(.34,1.5,.5,1)] group-has-[#tcl-15-billing:checked]/demo:translate-x-5.5 group-has-[#tcl-15-billing:checked]/demo:bg-tcl15-accent motion-reduce:transition-none"></span>
        </span>
        <span class="inline-flex items-center gap-2 text-tcl15-mut transition-colors group-has-[#tcl-15-billing:checked]/demo:text-tcl15-ink">Yearly <b class="rounded-full bg-tcl15-accent/45 px-2.25 py-1.25 text-[10.5px] font-bold uppercase tracking-[0.08em] text-tcl15-ink opacity-60 transition-[opacity,scale] duration-300 ease-[cubic-bezier(.34,1.5,.5,1)] group-has-[#tcl-15-billing:checked]/demo:scale-106 group-has-[#tcl-15-billing:checked]/demo:opacity-100">save 20%</b></span>
      </label>
    </header>
    <div class="grid w-full max-w-[1020px] grid-cols-[repeat(auto-fit,minmax(250px,1fr))] items-center gap-[clamp(20px,3vw,28px)]">
      <article class="grid content-start gap-2.75 rounded-[38px] bg-tcl15-clay p-[clamp(24px,3vw,32px)] shadow-tcl15-tier2 transition-[translate] duration-[400ms] ease-[cubic-bezier(.34,1.3,.5,1)] hover:-translate-y-1.5">
        <p class="text-xs font-bold uppercase tracking-[0.15em] text-tcl15-ink/70">Starter</p>
        <p class="font-tcl15-display text-[clamp(32px,4.4vw,42px)] leading-none font-extrabold tracking-[-0.04em] tabular-nums">$0<em class="text-[15px] font-semibold not-italic tracking-normal text-tcl15-mut">/mo</em></p>
        <p class="text-[12.5px] text-tcl15-mut">Free forever</p>
        <p class="text-[13.5px] leading-normal text-tcl15-ink/85 text-pretty">Every snippet, no account needed.</p>
        <ul class="mt-1.5 mb-0.5 grid gap-1.75 rounded-3xl bg-tcl15-well px-4.5 py-4 text-[13.5px] shadow-tcl15-feats">
          <li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">All 20 demos</li><li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Copy any snippet</li><li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Community support</li>
        </ul>
        <button type="button" class="mt-1.5 min-h-13 cursor-pointer rounded-3xl bg-tcl15-soft px-5.5 text-[14.5px] font-bold shadow-tcl15-btn transition-[translate,scale,box-shadow] duration-200 ease-[cubic-bezier(.2,.8,.3,1.4)] hover:-translate-y-0.75 active:translate-y-0.75 active:scale-y-94 active:shadow-tcl15-press focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-tcl15-ink">Start free</button>
      </article>
      <article class="relative z-10 grid content-start gap-2.75 rounded-[38px] bg-tcl15-pop p-[clamp(24px,3vw,32px)] pt-[clamp(32px,3.6vw,42px)] shadow-tcl15-tier4 transition-[translate] duration-[400ms] ease-[cubic-bezier(.34,1.3,.5,1)] hover:-translate-y-2.5 md:scale-104">
        <span class="absolute -top-3.5 left-1/2 -translate-x-1/2 rounded-full bg-tcl15-ribbon px-4 py-2 text-[11px] font-bold uppercase tracking-[0.12em] whitespace-nowrap text-white shadow-tcl15-ribbon">Most popular</span>
        <p class="text-xs font-bold uppercase tracking-[0.15em] text-tcl15-ink/70">Pro</p>
        <p class="font-tcl15-display text-[clamp(32px,4.4vw,42px)] leading-none font-extrabold tracking-[-0.04em] tabular-nums"><span class="group-has-[#tcl-15-billing:checked]/demo:hidden">$19</span><span class="hidden group-has-[#tcl-15-billing:checked]/demo:inline">$15</span><em class="text-[15px] font-semibold not-italic tracking-normal text-tcl15-ink/70">/mo</em></p>
        <p class="text-[12.5px] text-tcl15-ink/75"><span class="group-has-[#tcl-15-billing:checked]/demo:hidden">Billed monthly</span><span class="hidden group-has-[#tcl-15-billing:checked]/demo:inline">Billed $182 yearly</span></p>
        <p class="text-[13.5px] leading-normal text-tcl15-ink/85 text-pretty">Figma tokens, dark-mode variants and the clay generator.</p>
        <ul class="mt-1.5 mb-0.5 grid gap-1.75 rounded-3xl bg-tcl15-popwell px-4.5 py-4 text-[13.5px] shadow-tcl15-feats">
          <li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Token &amp; Tailwind presets</li><li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Dark-mode recalibration</li><li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Figma clay library</li><li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Priority answers</li>
        </ul>
        <button type="button" class="mt-1.5 min-h-13 cursor-pointer rounded-3xl bg-tcl15-accent px-5.5 text-[14.5px] font-bold text-tcl15-accentink shadow-tcl15-btn transition-[translate,scale,box-shadow] duration-200 ease-[cubic-bezier(.2,.8,.3,1.4)] hover:-translate-y-0.75 active:translate-y-0.75 active:scale-y-94 active:shadow-tcl15-press focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-tcl15-ink">Get Pro</button>
      </article>
      <article class="grid content-start gap-2.75 rounded-[38px] bg-tcl15-clay p-[clamp(24px,3vw,32px)] shadow-tcl15-tier2 transition-[translate] duration-[400ms] ease-[cubic-bezier(.34,1.3,.5,1)] hover:-translate-y-1.5">
        <p class="text-xs font-bold uppercase tracking-[0.15em] text-tcl15-ink/70">Team</p>
        <p class="font-tcl15-display text-[clamp(32px,4.4vw,42px)] leading-none font-extrabold tracking-[-0.04em] tabular-nums"><span class="group-has-[#tcl-15-billing:checked]/demo:hidden">$49</span><span class="hidden group-has-[#tcl-15-billing:checked]/demo:inline">$39</span><em class="text-[15px] font-semibold not-italic tracking-normal text-tcl15-mut">/mo</em></p>
        <p class="text-[12.5px] text-tcl15-mut"><span class="group-has-[#tcl-15-billing:checked]/demo:hidden">Billed monthly</span><span class="hidden group-has-[#tcl-15-billing:checked]/demo:inline">Billed $470 yearly</span></p>
        <p class="text-[13.5px] leading-normal text-tcl15-ink/85 text-pretty">Shared design tokens for the whole product team.</p>
        <ul class="mt-1.5 mb-0.5 grid gap-1.75 rounded-3xl bg-tcl15-well px-4.5 py-4 text-[13.5px] shadow-tcl15-feats">
          <li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">10 seats</li><li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Design-system audit</li><li class="flex items-center gap-2.5 before:size-2 before:flex-none before:rounded-full before:bg-tcl15-dot">Onboarding session</li>
        </ul>
        <button type="button" class="mt-1.5 min-h-13 cursor-pointer rounded-3xl bg-tcl15-soft px-5.5 text-[14.5px] font-bold shadow-tcl15-btn transition-[translate,scale,box-shadow] duration-200 ease-[cubic-bezier(.2,.8,.3,1.4)] hover:-translate-y-0.75 active:translate-y-0.75 active:scale-y-94 active:shadow-tcl15-press focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-tcl15-ink">Talk to us</button>
      </article>
    </div>
    <p aria-hidden="true" class="rounded-full bg-white/55 px-4 py-2 text-center font-tcl15-mono text-[11.5px] text-tcl15-mut">hierarchy from elevation + scale · group-has-[#billing:checked]/demo: price swap · tabular-nums</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcl15-bg: #deedfe;
  --color-tcl15-bg: oklch(0.94 0.028 250);
  --color-tcl15-glow: #e4f8ff;
  --color-tcl15-glow: oklch(0.97 0.03 240);
  --color-tcl15-clay: #c8e1fb;
  --color-tcl15-clay: oklch(0.9 0.045 250);
  --color-tcl15-pop: #9fe4fa;
  --color-tcl15-pop: oklch(0.88 0.075 220);
  --color-tcl15-soft: #e2f0ff;
  --color-tcl15-soft: oklch(0.95 0.025 250);
  --color-tcl15-well: #bfd7f1;
  --color-tcl15-well: oklch(0.87 0.045 250);
  --color-tcl15-popwell: #9bd9ef;
  --color-tcl15-popwell: oklch(0.85 0.07 222);
  --color-tcl15-accent: #34dde5;
  --color-tcl15-accent: oklch(0.82 0.13 200);
  --color-tcl15-accentink: #002735;
  --color-tcl15-accentink: oklch(0.25 0.06 220);
  --color-tcl15-ribbon: #065da0;
  --color-tcl15-ribbon: oklch(0.47 0.13 250);
  --color-tcl15-dot: #00878f;
  --color-tcl15-dot: oklch(0.55 0.13 200);
  --color-tcl15-shade: #416f9e80;
  --color-tcl15-shade: oklch(0.53 0.09 250 / 0.5);
  --color-tcl15-light: #f9fffff2;
  --color-tcl15-light: oklch(1 0.012 250 / 0.95);
  --color-tcl15-ink: #0f253b;
  --color-tcl15-ink: oklch(0.26 0.05 250);
  --color-tcl15-mut: #42576e;
  --color-tcl15-mut: oklch(0.45 0.045 250);
  --font-tcl15-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-tcl15-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tcl15-mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow-tcl15-tier2: 0 18px 34px -8px var(--color-tcl15-shade), inset 0 -8px 16px -8px var(--color-tcl15-shade), inset 0 10px 16px -6px var(--color-tcl15-light);
  --shadow-tcl15-tier4: 0 36px 68px -16px var(--color-tcl15-shade), inset 0 -16px 32px -8px var(--color-tcl15-shade), inset 0 20px 32px -6px var(--color-tcl15-light);
  --shadow-tcl15-pill: 0 14px 24px -16px var(--color-tcl15-shade), inset 0 -9px 15px -11px var(--color-tcl15-shade), inset 0 11px 15px -8px var(--color-tcl15-light);
  --shadow-tcl15-track: inset 0 8px 14px -6px var(--color-tcl15-shade), inset 0 -5px 10px -8px var(--color-tcl15-light);
  --shadow-tcl15-knob: 0 7px 12px -5px var(--color-tcl15-shade), inset 0 -5px 8px -6px var(--color-tcl15-shade), inset 0 7px 9px -5px var(--color-tcl15-light);
  --shadow-tcl15-feats: inset 0 9px 16px -8px var(--color-tcl15-shade), inset 0 -6px 12px -10px var(--color-tcl15-light);
  --shadow-tcl15-btn: 0 14px 22px -12px var(--color-tcl15-shade), inset 0 -10px 16px -9px var(--color-tcl15-shade), inset 0 12px 16px -7px var(--color-tcl15-light);
  --shadow-tcl15-press: 0 0 0 0 transparent, inset 0 12px 18px -8px var(--color-tcl15-shade), inset 0 -6px 12px -9px var(--color-tcl15-light);
  --shadow-tcl15-ribbon: 0 12px 20px -8px var(--color-tcl15-shade), inset 0 -5px 9px -6px oklch(0 0 0 / 0.4), inset 0 7px 9px -5px oklch(1 0 0 / 0.45);
}
/* 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. */

.tcl-15 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Depth is the hierarchy. Side plans rest at tier 2; Pro is tier 4 plus scale-104. No border, no badge colour war — it simply sits closer to you.

Prices as two spans. Each price holds a monthly and a yearly span; the root is group/demo and the checkbox lives anywhere inside:

<span class="group-has-[#tcl-15-billing:checked]/demo:hidden">$19</span>
<span class="hidden group-has-[#tcl-15-billing:checked]/demo:inline">$15</span>

Compare like with like. Showing $182/yr next to $19/mo makes the buyer do maths. The yearly state shows $15/mo large and the annual total small underneath.

Make it yours

  • Discount: change the yearly spans and the "save 20%" copy together.
  • Four plans: the grid is auto-fit minmax(250px,1fr); add an article and it wraps.
  • Different popular plan: move shadow-tcl15-tier4 scale-104, the tinted fill and the ribbon to another card.

Gotchas — read before shipping

  • Screen readers read both price spans unless one is hidden — display:none is correct here, not opacity-0.
  • A scaled card can overlap neighbours on narrow grids; the popular card drops to scale-100 below md.
  • The ribbon uses whitespace-nowrap; keep its copy short.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:has() ships in all three engines inside Tailwind v4's floor.

Techniques used in this demo

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →