15 Tailwind Card Grid Layouts
03 / 15

All 15 in 15 Tailwind Card Grid Layouts

  1. 01Tailwind Stats Dashboard KPI Grid
  2. 02Tailwind Hero Photo Collage Grid
  3. 03Tailwind Pricing Comparison Card Grid
  4. 04Tailwind Testimonial Wall Grid
  5. 05Tailwind Editorial Tabloid Bento Layout
  6. 06Tailwind Featured Article Magazine Grid
  7. 07Tailwind Asymmetric Bento Box Feature Grid
  8. 08Tailwind Stratified Bento Grid Layout
  9. 09Tailwind Equal-Height Product Grid
  10. 10Tailwind Fluid Masonry Card Grid
  11. 11Tailwind Auto-Fit Blog Archive Grid
  12. 12Tailwind Team Directory Face Grid
  13. 13Tailwind 3D Hover Flip Card Grid
  14. 14Tailwind Use-Case Showcase Card Grid
  15. 15Tailwind Glass Bento Grid Layout
Pure TailwindMIT licensed

Tailwind Pricing Comparison Card Grid

Three tiers, one featured, and every CTA on the same horizontal axis regardless of how many features a tier lists — because each card is flex flex-col with flex-1 on the list and mt-auto on the button. The featured tier's whole identity is five utilities: scale-104, a two-pixel accent border, a shadow, z-1, and max-[860px]:order-first.

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="tcg-10 w-full min-h-svh flex flex-col items-center justify-center bg-tcg10-bg font-tcg10-sans text-tcg10-ink px-[clamp(20px,3vw,48px)] py-[clamp(32px,4vw,64px)]" aria-label="Pricing comparison card grid demo">

  <header class="max-w-[600px] text-center mb-[clamp(32px,4vw,56px)]">
    <span class="inline-block mb-3.5 px-3 py-1.5 rounded-full text-[.74rem] font-bold tracking-[0.18em] uppercase text-tcg10-accent bg-tcg10-accentsoft">Pricing</span>
    <h2 class="text-[clamp(1.8rem,3.4vw,2.6rem)] font-extrabold tracking-[-0.02em] leading-[1.1]">Simple plans. No surprises.</h2>
    <p class="mt-2.5 text-[clamp(.92rem,1.1vw,1.05rem)] leading-[1.5] text-tcg10-muted text-pretty">Pick a plan that fits. Switch or cancel any time.</p>
  </header>

  <div class="w-full max-w-[1080px] grid grid-cols-3 max-[860px]:grid-cols-1 max-[860px]:max-w-[480px] items-stretch gap-[clamp(16px,2vw,28px)]">

    <article class="relative flex flex-col rounded-2xl border border-tcg10-line bg-tcg10-card p-[clamp(24px,2.4vw,32px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-1 hover:shadow-[0_18px_32px_-16px_oklch(0.2_0.04_260/0.18)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <header class="mb-4.5">
        <span class="block text-xl font-extrabold tracking-[-0.01em]">Starter</span>
        <span class="block mt-1 text-[.84rem] text-tcg10-muted">For solo makers</span>
      </header>
      <div class="flex items-baseline gap-0.5 mb-2 leading-none">
        <span class="self-start mt-2 text-[1.4rem] font-bold text-tcg10-muted">$</span>
        <span class="text-tcg10-price font-black tracking-[-0.04em] leading-none tabular-nums">0</span>
        <span class="text-base font-semibold text-tcg10-muted">/mo</span>
      </div>
      <p class="mt-3.5 mb-5.5 text-[.92rem] leading-[1.45] text-tcg10-muted">Everything you need to get going.</p>
      <ul class="flex-1 flex flex-col gap-2.75 mb-6 list-none">
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>1 project</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>10K monthly events</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>Community support</li>
        <li class="flex items-center gap-2.75 text-[.94rem] text-tcg10-muted"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-line text-tcg10-muted text-[.72rem] font-extrabold" aria-hidden="true">&#10007;</span>Custom domains</li>
        <li class="flex items-center gap-2.75 text-[.94rem] text-tcg10-muted"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-line text-tcg10-muted text-[.72rem] font-extrabold" aria-hidden="true">&#10007;</span>Team seats</li>
      </ul>
      <a href="#starter" class="mt-auto flex items-center justify-center min-h-11 px-5 py-3.25 rounded-[10px] border-[1.5px] border-tcg10-line text-[.94rem] font-bold text-tcg10-ink no-underline transition-[color,border-color] duration-250 hover:text-tcg10-accent hover:border-tcg10-accent focus-visible:outline-2 focus-visible:outline-tcg10-accent focus-visible:outline-offset-2 motion-reduce:transition-none">Start free</a>
    </article>

    <article class="relative z-1 flex flex-col scale-104 max-[860px]:scale-100 max-[860px]:order-first rounded-2xl border-2 border-tcg10-accent bg-tcg10-card p-[clamp(24px,2.4vw,32px)] shadow-[0_24px_48px_-20px_oklch(0.5_0.24_296/0.32)] transition-[translate,scale,box-shadow] duration-250 hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <span class="absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap px-3.5 py-1.5 rounded-full bg-tcg10-accent text-white text-[.7rem] font-bold tracking-[0.14em] uppercase">Most Popular</span>
      <header class="mb-4.5">
        <span class="block text-xl font-extrabold tracking-[-0.01em]">Pro</span>
        <span class="block mt-1 text-[.84rem] text-tcg10-muted">For growing teams</span>
      </header>
      <div class="flex items-baseline gap-0.5 mb-2 leading-none">
        <span class="self-start mt-2 text-[1.4rem] font-bold text-tcg10-muted">$</span>
        <span class="text-tcg10-price font-black tracking-[-0.04em] leading-none tabular-nums">24</span>
        <span class="text-base font-semibold text-tcg10-muted">/mo</span>
      </div>
      <p class="mt-3.5 mb-5.5 text-[.92rem] leading-[1.45] text-tcg10-muted">Everything in Starter, plus the good stuff.</p>
      <ul class="flex-1 flex flex-col gap-2.75 mb-6 list-none">
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>Unlimited projects</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>1M monthly events</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>Priority support</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>Custom domains</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>5 team seats</li>
      </ul>
      <a href="#pro" class="mt-auto flex items-center justify-center min-h-11 px-5 py-3.25 rounded-[10px] bg-tcg10-accent text-[.94rem] font-bold text-white no-underline transition-[background] duration-250 hover:bg-tcg10-accentdeep focus-visible:outline-2 focus-visible:outline-tcg10-ink focus-visible:outline-offset-2 motion-reduce:transition-none">Start 14-day trial &rarr;</a>
    </article>

    <article class="relative flex flex-col rounded-2xl border border-tcg10-line bg-tcg10-card p-[clamp(24px,2.4vw,32px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-1 hover:shadow-[0_18px_32px_-16px_oklch(0.2_0.04_260/0.18)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <header class="mb-4.5">
        <span class="block text-xl font-extrabold tracking-[-0.01em]">Enterprise</span>
        <span class="block mt-1 text-[.84rem] text-tcg10-muted">For scale</span>
      </header>
      <div class="flex items-baseline mb-2 leading-none">
        <span class="text-[clamp(2rem,4vw,2.8rem)] font-black tracking-[-0.02em] leading-none">Custom</span>
      </div>
      <p class="mt-3.5 mb-5.5 text-[.92rem] leading-[1.45] text-tcg10-muted">Everything in Pro, plus SLAs and SSO.</p>
      <ul class="flex-1 flex flex-col gap-2.75 mb-6 list-none">
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>Unlimited everything</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>Dedicated CSM</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>99.99% SLA</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>SSO + SAML</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>Custom contracts</li>
      </ul>
      <a href="#enterprise" class="mt-auto flex items-center justify-center min-h-11 px-5 py-3.25 rounded-[10px] border-[1.5px] border-tcg10-line text-[.94rem] font-bold text-tcg10-ink no-underline transition-[color,border-color] duration-250 hover:text-tcg10-accent hover:border-tcg10-accent focus-visible:outline-2 focus-visible:outline-tcg10-accent focus-visible:outline-offset-2 motion-reduce:transition-none">Contact sales</a>
    </article>

  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcg10-bg: #fafafa;
  --color-tcg10-bg: oklch(0.98 0 0);
  --color-tcg10-card: #ffffff;
  --color-tcg10-card: oklch(1 0 0);
  --color-tcg10-ink: #0f172a;
  --color-tcg10-ink: oklch(0.21 0.04 260);
  --color-tcg10-muted: #64748b;
  --color-tcg10-muted: oklch(0.55 0.03 257);
  --color-tcg10-line: #e2e8f0;
  --color-tcg10-line: oklch(0.92 0.01 255);
  --color-tcg10-accent: #7c3aed;
  --color-tcg10-accent: oklch(0.54 0.25 296);
  --color-tcg10-accentdeep: #6d28d9;
  --color-tcg10-accentdeep: oklch(0.48 0.24 296);
  --color-tcg10-accentsoft: #ede9fe;
  --color-tcg10-accentsoft: oklch(0.94 0.03 296);
  --font-tcg10-sans: 'Space Grotesk', system-ui, sans-serif;
  --text-tcg10-price: clamp(2.6rem, 5.5vw, 4rem);
}
/* Root rule: the full-bleed contract. */

.tcg-10 {
  width: 100%;
  min-height: 100svh;
}

.tcg-10 ::selection {
  background: #7c3aed;
  color: #fff;
}

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-tcg10-bg: #fafafa;
  --color-tcg10-bg: oklch(0.98 0 0);
  --color-tcg10-card: #ffffff;
  --color-tcg10-card: oklch(1 0 0);
  --color-tcg10-ink: #0f172a;
  --color-tcg10-ink: oklch(0.21 0.04 260);
  --color-tcg10-muted: #64748b;
  --color-tcg10-muted: oklch(0.55 0.03 257);
  --color-tcg10-line: #e2e8f0;
  --color-tcg10-line: oklch(0.92 0.01 255);
  --color-tcg10-accent: #7c3aed;
  --color-tcg10-accent: oklch(0.54 0.25 296);
  --color-tcg10-accentdeep: #6d28d9;
  --color-tcg10-accentdeep: oklch(0.48 0.24 296);
  --color-tcg10-accentsoft: #ede9fe;
  --color-tcg10-accentsoft: oklch(0.94 0.03 296);
  --font-tcg10-sans: 'Space Grotesk', system-ui, sans-serif;
  --text-tcg10-price: clamp(2.6rem, 5.5vw, 4rem);
}
/* Root rule: the full-bleed contract. */

.tcg-10 {
  width: 100%;
  min-height: 100svh;
}

.tcg-10 ::selection {
  background: #7c3aed;
  color: #fff;
}
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&family=JetBrains+Mono:wght@400;500;600&display=swap">

What changed in the port

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

  • The equal-height contract is now readable: items-stretch on the grid, flex flex-col on the card, flex-1 on the list, mt-auto on the CTA. Four utilities on four elements instead of four rules in a stylesheet.
  • The featured tier is a class group, not a modifier class, which is what makes moving the feature to another tier a copy-paste rather than a rename.
  • Composed transforms are where the port gets simpler, not harder: v4 writes scale and translate as separate CSS properties, so scale-104 survives hover:-translate-y-1 untouched and the CSS version's scale(1.04) translateY(-4px) hover rule has no equivalent to write.
  • One clamp() used by three prices became an @theme text token; the clamps used once stayed arbitrary. That is the promotion rule the whole collection follows.
  • The CSS version's order:-1 mobile rule is max-[860px]:order-first, and the accompanying transform:none is max-[860px]:scale-100 — both stated on the card they affect.
  • Every CTA became a real <a> with min-h-11 and a focus ring; the checks are aria-hidden so a screen reader reads the feature, not a glyph.
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 Comparison Card Grid
Source: https://codefronts.com/layouts/tailwind-card-grid-layout/tailwind-pricing-comparison-card-grid/

Three tiers, one featured, and every CTA on the same horizontal axis regardless of how many features a tier lists &mdash; because each card is flex flex-col with flex-1 on the list and mt-auto on the button. The featured tier's whole identity is five utilities: scale-104, a two-pixel accent border, a shadow, z-1, and max-[860px]:order-first.
## HTML
```html
<section class="tcg-10 w-full min-h-svh flex flex-col items-center justify-center bg-tcg10-bg font-tcg10-sans text-tcg10-ink px-[clamp(20px,3vw,48px)] py-[clamp(32px,4vw,64px)]" aria-label="Pricing comparison card grid demo">

  <header class="max-w-[600px] text-center mb-[clamp(32px,4vw,56px)]">
    <span class="inline-block mb-3.5 px-3 py-1.5 rounded-full text-[.74rem] font-bold tracking-[0.18em] uppercase text-tcg10-accent bg-tcg10-accentsoft">Pricing</span>
    <h2 class="text-[clamp(1.8rem,3.4vw,2.6rem)] font-extrabold tracking-[-0.02em] leading-[1.1]">Simple plans. No surprises.</h2>
    <p class="mt-2.5 text-[clamp(.92rem,1.1vw,1.05rem)] leading-[1.5] text-tcg10-muted text-pretty">Pick a plan that fits. Switch or cancel any time.</p>
  </header>

  <div class="w-full max-w-[1080px] grid grid-cols-3 max-[860px]:grid-cols-1 max-[860px]:max-w-[480px] items-stretch gap-[clamp(16px,2vw,28px)]">

    <article class="relative flex flex-col rounded-2xl border border-tcg10-line bg-tcg10-card p-[clamp(24px,2.4vw,32px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-1 hover:shadow-[0_18px_32px_-16px_oklch(0.2_0.04_260/0.18)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <header class="mb-4.5">
        <span class="block text-xl font-extrabold tracking-[-0.01em]">Starter</span>
        <span class="block mt-1 text-[.84rem] text-tcg10-muted">For solo makers</span>
      </header>
      <div class="flex items-baseline gap-0.5 mb-2 leading-none">
        <span class="self-start mt-2 text-[1.4rem] font-bold text-tcg10-muted">$</span>
        <span class="text-tcg10-price font-black tracking-[-0.04em] leading-none tabular-nums">0</span>
        <span class="text-base font-semibold text-tcg10-muted">/mo</span>
      </div>
      <p class="mt-3.5 mb-5.5 text-[.92rem] leading-[1.45] text-tcg10-muted">Everything you need to get going.</p>
      <ul class="flex-1 flex flex-col gap-2.75 mb-6 list-none">
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>1 project</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>10K monthly events</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>Community support</li>
        <li class="flex items-center gap-2.75 text-[.94rem] text-tcg10-muted"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-line text-tcg10-muted text-[.72rem] font-extrabold" aria-hidden="true">&#10007;</span>Custom domains</li>
        <li class="flex items-center gap-2.75 text-[.94rem] text-tcg10-muted"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-line text-tcg10-muted text-[.72rem] font-extrabold" aria-hidden="true">&#10007;</span>Team seats</li>
      </ul>
      <a href="#starter" class="mt-auto flex items-center justify-center min-h-11 px-5 py-3.25 rounded-[10px] border-[1.5px] border-tcg10-line text-[.94rem] font-bold text-tcg10-ink no-underline transition-[color,border-color] duration-250 hover:text-tcg10-accent hover:border-tcg10-accent focus-visible:outline-2 focus-visible:outline-tcg10-accent focus-visible:outline-offset-2 motion-reduce:transition-none">Start free</a>
    </article>

    <article class="relative z-1 flex flex-col scale-104 max-[860px]:scale-100 max-[860px]:order-first rounded-2xl border-2 border-tcg10-accent bg-tcg10-card p-[clamp(24px,2.4vw,32px)] shadow-[0_24px_48px_-20px_oklch(0.5_0.24_296/0.32)] transition-[translate,scale,box-shadow] duration-250 hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <span class="absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap px-3.5 py-1.5 rounded-full bg-tcg10-accent text-white text-[.7rem] font-bold tracking-[0.14em] uppercase">Most Popular</span>
      <header class="mb-4.5">
        <span class="block text-xl font-extrabold tracking-[-0.01em]">Pro</span>
        <span class="block mt-1 text-[.84rem] text-tcg10-muted">For growing teams</span>
      </header>
      <div class="flex items-baseline gap-0.5 mb-2 leading-none">
        <span class="self-start mt-2 text-[1.4rem] font-bold text-tcg10-muted">$</span>
        <span class="text-tcg10-price font-black tracking-[-0.04em] leading-none tabular-nums">24</span>
        <span class="text-base font-semibold text-tcg10-muted">/mo</span>
      </div>
      <p class="mt-3.5 mb-5.5 text-[.92rem] leading-[1.45] text-tcg10-muted">Everything in Starter, plus the good stuff.</p>
      <ul class="flex-1 flex flex-col gap-2.75 mb-6 list-none">
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>Unlimited projects</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>1M monthly events</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>Priority support</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>Custom domains</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>5 team seats</li>
      </ul>
      <a href="#pro" class="mt-auto flex items-center justify-center min-h-11 px-5 py-3.25 rounded-[10px] bg-tcg10-accent text-[.94rem] font-bold text-white no-underline transition-[background] duration-250 hover:bg-tcg10-accentdeep focus-visible:outline-2 focus-visible:outline-tcg10-ink focus-visible:outline-offset-2 motion-reduce:transition-none">Start 14-day trial &rarr;</a>
    </article>

    <article class="relative flex flex-col rounded-2xl border border-tcg10-line bg-tcg10-card p-[clamp(24px,2.4vw,32px)] transition-[translate,box-shadow] duration-250 hover:-translate-y-1 hover:shadow-[0_18px_32px_-16px_oklch(0.2_0.04_260/0.18)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <header class="mb-4.5">
        <span class="block text-xl font-extrabold tracking-[-0.01em]">Enterprise</span>
        <span class="block mt-1 text-[.84rem] text-tcg10-muted">For scale</span>
      </header>
      <div class="flex items-baseline mb-2 leading-none">
        <span class="text-[clamp(2rem,4vw,2.8rem)] font-black tracking-[-0.02em] leading-none">Custom</span>
      </div>
      <p class="mt-3.5 mb-5.5 text-[.92rem] leading-[1.45] text-tcg10-muted">Everything in Pro, plus SLAs and SSO.</p>
      <ul class="flex-1 flex flex-col gap-2.75 mb-6 list-none">
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>Unlimited everything</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>Dedicated CSM</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>99.99% SLA</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>SSO + SAML</li>
        <li class="flex items-center gap-2.75 text-[.94rem]"><span class="shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full bg-tcg10-accent text-white text-[.72rem] font-extrabold" aria-hidden="true">&#10003;</span>Custom contracts</li>
      </ul>
      <a href="#enterprise" class="mt-auto flex items-center justify-center min-h-11 px-5 py-3.25 rounded-[10px] border-[1.5px] border-tcg10-line text-[.94rem] font-bold text-tcg10-ink no-underline transition-[color,border-color] duration-250 hover:text-tcg10-accent hover:border-tcg10-accent focus-visible:outline-2 focus-visible:outline-tcg10-accent focus-visible:outline-offset-2 motion-reduce:transition-none">Contact sales</a>
    </article>

  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcg10-bg: #fafafa;
  --color-tcg10-bg: oklch(0.98 0 0);
  --color-tcg10-card: #ffffff;
  --color-tcg10-card: oklch(1 0 0);
  --color-tcg10-ink: #0f172a;
  --color-tcg10-ink: oklch(0.21 0.04 260);
  --color-tcg10-muted: #64748b;
  --color-tcg10-muted: oklch(0.55 0.03 257);
  --color-tcg10-line: #e2e8f0;
  --color-tcg10-line: oklch(0.92 0.01 255);
  --color-tcg10-accent: #7c3aed;
  --color-tcg10-accent: oklch(0.54 0.25 296);
  --color-tcg10-accentdeep: #6d28d9;
  --color-tcg10-accentdeep: oklch(0.48 0.24 296);
  --color-tcg10-accentsoft: #ede9fe;
  --color-tcg10-accentsoft: oklch(0.94 0.03 296);
  --font-tcg10-sans: 'Space Grotesk', system-ui, sans-serif;
  --text-tcg10-price: clamp(2.6rem, 5.5vw, 4rem);
}
/* Root rule: the full-bleed contract. */

.tcg-10 {
  width: 100%;
  min-height: 100svh;
}

.tcg-10 ::selection {
  background: #7c3aed;
  color: #fff;
}
```

How this works

The alignment trick, made local. Grid already stretches every card to the tallest row. Inside, the card is a flex column and two utilities do the rest:

<ul class="flex-1 …">…</ul>
<a class="mt-auto …">Start free</a>

A tier with three features and a tier with six produce buttons on the same line, and the reason is visible on the two elements involved rather than inferred from a stylesheet.

The featured tier keeps its scale during hover for free. In CSS this was a trap: transform: scale(1.04) and a hover transform: translateY(-4px) are the same property, so the original had to write scale(1.04) translateY(-4px) in the hover rule or the card shrank as it lifted. v4 emits the independent scale and translate properties instead, so scale-104 and hover:-translate-y-1 compose on their own and neither resets the other — a rare case where the port removes a rule rather than relocating it.

The price size is a token, not a repeat. Three tiers share one clamp(), so it goes in @theme as --text-tcg10-price and becomes text-tcg10-price. That is the test for promotion: a value used by many elements across the design is a token; a value used once is arbitrary.

The ribbon needs the card to keep its overflow. -top-3 puts it outside the card's box, so the card must not carry overflow-hidden — noted in the gotchas because it is the single most common way this pattern breaks.

Make it yours

  • Move the feature by moving the class group — scale-104 border-2 border-tcg10-accent, the shadow and the ribbon can sit on any of the three cards.
  • Retheme through --color-tcg10-accent and --color-tcg10-accentsoft: border, ribbon, checks, CTA and kicker all read them.
  • Resize every price at once by editing --text-tcg10-price in @theme.
  • Add a monthly/annual switch above the grid; the prices are plain text nodes ready for a five-line controller.
  • Add or drop feature rows by copying an <li>; the check pill and the muted-plus-strikethrough treatment are per-row utilities.

Gotchas — read before shipping

  • Do not port the CSS hover rule literally. hover:scale-104 hover:-translate-y-1 works but the scale half is dead weight in v4 (separate scale and translate properties); in v3, where both compiled into one transform, restating it was mandatory.
  • Do not add overflow-hidden to the featured card: the -top-3 ribbon lives outside the card's box and will be clipped.
  • scale-104 can render the 2px accent border at sub-pixel positions on some retina zoom levels; add will-change-transform if you see a hairline blur.
  • The excluded-feature rows need the muted colour on the <li> AND the dim pill on the check — one without the other reads as a rendering bug rather than a deliberate exclusion.
  • Three stacked pricing cards on a phone lose the comparison; max-[860px]:order-first at least puts the recommended tier where the thumb lands.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Baseline Grid + Flexbox auto-margins; the Unicode check (&#10003; U+2713) has universal font support. The floor quoted is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

flexboxtw ↗transitionstw ↗prefers-reduced-motiontw ↗

Arbitraryneeds bracket syntax

clamp()tw ↗

HTML & JSno Tailwind involved

anchor elementMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →