22 Tailwind CSS Feature Sections
08 / 22

All 22 in 22 Tailwind CSS Feature Sections

  1. 01Tailwind Tabbed Product Tour Feature Section
  2. 02Tailwind Alternating Feature Rows with Images
  3. 03Tailwind Feature Section with Stat Counters
  4. 04Tailwind Problem vs Solution Feature Section
  5. 05Tailwind Feature Section with Product Video
  6. 06Tailwind Integrations Logo Grid Section
  7. 07Tailwind Accordion Feature Cards Section
  8. 08Tailwind Plan Feature Comparison Columns
  9. 09Tailwind Security Compliance Badges Section
  10. 10Tailwind API Feature Section with Code
  11. 11Tailwind Feature Rows with Customer Quotes
  12. 12Tailwind Sticky Scroll Feature Section
  13. 13Tailwind Feature Section Icon Grid
  14. 14Tailwind Bento Grid Feature Section
  15. 15Tailwind Dark Glassmorphism Feature Section
  16. 16Tailwind Feature Cards with Scroll Reveal
  17. 17Tailwind Feature Section with Code Snippet
  18. 18Tailwind Feature Comparison Table Section
  19. 19Tailwind SaaS Features Section Grid
  20. 20Tailwind 3D Tilt Feature Cards Section
  21. 21Tailwind Feature Section with Phone Mockup
  22. 22Tailwind Vertical Timeline Feature Section
Pure TailwindMIT licensed

Tailwind Plan Feature Comparison Columns

Three plan columns whose feature rows line up perfectly across cards, even when one value wraps to two lines. Each card is grid-rows-subgrid row-span-8, so all three share one set of row tracks — the alignment the CSS original faked with fixed heights.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<section class="tfs-08 w-full min-h-svh bg-tfs08-bg px-5 py-20 font-tfs08-sans text-tfs08-ink antialiased sm:py-28" aria-labelledby="tfs-08-h">
  <div class="mx-auto grid w-full max-w-6xl gap-14">
    <header class="mx-auto grid max-w-2xl gap-4 text-center">
      <p class="text-sm font-semibold text-tfs08-acc">Compare plans</p>
      <h2 id="tfs-08-h" class="text-balance text-4xl font-semibold tracking-tight sm:text-5xl">Every plan ships the core. Scale unlocks the rest.</h2>
    </header>
    <div class="grid gap-6 lg:grid-cols-3 lg:gap-x-6 lg:gap-y-0">
      <article class="relative grid gap-0 rounded-3xl bg-white p-2 lg:row-span-8 lg:grid-rows-subgrid ring-1 ring-tfs08-line">
        <div class="grid gap-2 rounded-2xl bg-tfs08-bg p-6"><h3 class="text-xl font-semibold">Starter</h3><p class="text-sm text-tfs08-mut">For side projects and first launches</p><p class="mt-2 text-3xl font-semibold tracking-tight">Free</p><a href="#tfs-08-h" class="mt-3 inline-flex min-h-11 items-center justify-center rounded-xl text-sm font-semibold transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs08-acc bg-white text-tfs08-ink ring-1 ring-tfs08-line hover:ring-tfs08-ink">Get started</a></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Projects</span><span class="text-right font-medium">3 projects</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Support</span><span class="text-right font-medium">Community</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Audit log retention</span><span class="text-right font-medium">7 days</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">SSO / SAML</span><span class="text-tfs08-line" aria-hidden="true">—</span><span class="sr-only">Not included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Role-based access</span><span class="text-tfs08-line" aria-hidden="true">—</span><span class="sr-only">Not included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">SCIM provisioning</span><span class="text-tfs08-line" aria-hidden="true">—</span><span class="sr-only">Not included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Data residency</span><span class="text-tfs08-line" aria-hidden="true">—</span><span class="sr-only">Not included</span></div>
      </article>
      <article class="relative grid gap-0 rounded-3xl bg-white p-2 lg:row-span-8 lg:grid-rows-subgrid ring-2 ring-tfs08-acc shadow-[0_30px_80px_-30px_var(--color-tfs08-acc)]">
        <p class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-tfs08-acc px-3 py-1 text-xs font-semibold text-white shadow">Most popular</p><div class="grid gap-2 rounded-2xl bg-tfs08-acc/5 p-6"><h3 class="text-xl font-semibold">Team</h3><p class="text-sm text-tfs08-mut">For product teams shipping weekly</p><p class="mt-2 text-3xl font-semibold tracking-tight">$24 / seat</p><a href="#tfs-08-h" class="mt-3 inline-flex min-h-11 items-center justify-center rounded-xl text-sm font-semibold transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs08-acc bg-tfs08-acc text-white hover:bg-tfs08-ink">Get started</a></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Projects</span><span class="text-right font-medium">Unlimited</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Support</span><span class="text-right font-medium">Email, 24h</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Audit log retention</span><span class="text-right font-medium">90 days</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">SSO / SAML</span><span class="grid size-6 place-items-center rounded-full bg-tfs08-acc/10 text-tfs08-acc"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Role-based access</span><span class="grid size-6 place-items-center rounded-full bg-tfs08-acc/10 text-tfs08-acc"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">SCIM provisioning</span><span class="text-tfs08-line" aria-hidden="true">—</span><span class="sr-only">Not included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Data residency</span><span class="text-tfs08-line" aria-hidden="true">—</span><span class="sr-only">Not included</span></div>
      </article>
      <article class="relative grid gap-0 rounded-3xl bg-white p-2 lg:row-span-8 lg:grid-rows-subgrid ring-1 ring-tfs08-line">
        <div class="grid gap-2 rounded-2xl bg-tfs08-bg p-6"><h3 class="text-xl font-semibold">Enterprise</h3><p class="text-sm text-tfs08-mut">For orgs with compliance needs</p><p class="mt-2 text-3xl font-semibold tracking-tight">Custom</p><a href="#tfs-08-h" class="mt-3 inline-flex min-h-11 items-center justify-center rounded-xl text-sm font-semibold transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs08-acc bg-white text-tfs08-ink ring-1 ring-tfs08-line hover:ring-tfs08-ink">Talk to sales</a></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Projects</span><span class="text-right font-medium">Unlimited</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Support</span><span class="text-right font-medium">Dedicated Slack, 1h SLA</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Audit log retention</span><span class="text-right font-medium">Unlimited, exportable to S3</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">SSO / SAML</span><span class="grid size-6 place-items-center rounded-full bg-tfs08-acc/10 text-tfs08-acc"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Role-based access</span><span class="grid size-6 place-items-center rounded-full bg-tfs08-acc/10 text-tfs08-acc"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">SCIM provisioning</span><span class="grid size-6 place-items-center rounded-full bg-tfs08-acc/10 text-tfs08-acc"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Data residency</span><span class="grid size-6 place-items-center rounded-full bg-tfs08-acc/10 text-tfs08-acc"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Included</span></div>
      </article>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tfs08-bg: #f7f7f8;
  --color-tfs08-bg: oklch(0.976 0.001 0);
  --color-tfs08-ink: #18181b;
  --color-tfs08-ink: oklch(0.21 0.006 286);
  --color-tfs08-mut: #52525b;
  --color-tfs08-mut: oklch(0.442 0.015 286);
  --color-tfs08-line: #e4e4e7;
  --color-tfs08-line: oklch(0.92 0.004 286);
  --color-tfs08-acc: #2563eb;
  --color-tfs08-acc: oklch(0.546 0.215 263);
  --font-tfs08-sans: 'Geist', system-ui, sans-serif;
}
/* 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. */

.tfs-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-tfs08-bg: #f7f7f8;
  --color-tfs08-bg: oklch(0.976 0.001 0);
  --color-tfs08-ink: #18181b;
  --color-tfs08-ink: oklch(0.21 0.006 286);
  --color-tfs08-mut: #52525b;
  --color-tfs08-mut: oklch(0.442 0.015 286);
  --color-tfs08-line: #e4e4e7;
  --color-tfs08-line: oklch(0.92 0.004 286);
  --color-tfs08-acc: #2563eb;
  --color-tfs08-acc: oklch(0.546 0.215 263);
  --font-tfs08-sans: 'Geist', system-ui, sans-serif;
}
/* 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. */

.tfs-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=Geist:wght@400..700&display=swap">

What changed in the port

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

  • The CSS original's fixed min-height on every row became grid-rows-subgrid, so rows align to real content instead of a guessed height.
  • UI upgrade from the CSS original: each card opens with a tinted header holding plan name, audience, price and CTA, so the comparison is also a conversion point.
  • UI upgrade: check and dash glyphs have sr-only 'Included' / 'Not included' twins — the original announced nothing.
  • UI upgrade: the recommended tier is ringed, badged and lifted with a tinted shadow.
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 Plan Feature Comparison Columns
Source: https://codefronts.com/layouts/tailwind-css-feature-sections/tailwind-plan-feature-comparison-columns/

Three plan columns whose feature rows line up perfectly across cards, even when one value wraps to two lines. Each card is grid-rows-subgrid row-span-8, so all three share one set of row tracks — the alignment the CSS original faked with fixed heights.
## HTML
```html
<section class="tfs-08 w-full min-h-svh bg-tfs08-bg px-5 py-20 font-tfs08-sans text-tfs08-ink antialiased sm:py-28" aria-labelledby="tfs-08-h">
  <div class="mx-auto grid w-full max-w-6xl gap-14">
    <header class="mx-auto grid max-w-2xl gap-4 text-center">
      <p class="text-sm font-semibold text-tfs08-acc">Compare plans</p>
      <h2 id="tfs-08-h" class="text-balance text-4xl font-semibold tracking-tight sm:text-5xl">Every plan ships the core. Scale unlocks the rest.</h2>
    </header>
    <div class="grid gap-6 lg:grid-cols-3 lg:gap-x-6 lg:gap-y-0">
      <article class="relative grid gap-0 rounded-3xl bg-white p-2 lg:row-span-8 lg:grid-rows-subgrid ring-1 ring-tfs08-line">
        <div class="grid gap-2 rounded-2xl bg-tfs08-bg p-6"><h3 class="text-xl font-semibold">Starter</h3><p class="text-sm text-tfs08-mut">For side projects and first launches</p><p class="mt-2 text-3xl font-semibold tracking-tight">Free</p><a href="#tfs-08-h" class="mt-3 inline-flex min-h-11 items-center justify-center rounded-xl text-sm font-semibold transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs08-acc bg-white text-tfs08-ink ring-1 ring-tfs08-line hover:ring-tfs08-ink">Get started</a></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Projects</span><span class="text-right font-medium">3 projects</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Support</span><span class="text-right font-medium">Community</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Audit log retention</span><span class="text-right font-medium">7 days</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">SSO / SAML</span><span class="text-tfs08-line" aria-hidden="true">—</span><span class="sr-only">Not included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Role-based access</span><span class="text-tfs08-line" aria-hidden="true">—</span><span class="sr-only">Not included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">SCIM provisioning</span><span class="text-tfs08-line" aria-hidden="true">—</span><span class="sr-only">Not included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Data residency</span><span class="text-tfs08-line" aria-hidden="true">—</span><span class="sr-only">Not included</span></div>
      </article>
      <article class="relative grid gap-0 rounded-3xl bg-white p-2 lg:row-span-8 lg:grid-rows-subgrid ring-2 ring-tfs08-acc shadow-[0_30px_80px_-30px_var(--color-tfs08-acc)]">
        <p class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-tfs08-acc px-3 py-1 text-xs font-semibold text-white shadow">Most popular</p><div class="grid gap-2 rounded-2xl bg-tfs08-acc/5 p-6"><h3 class="text-xl font-semibold">Team</h3><p class="text-sm text-tfs08-mut">For product teams shipping weekly</p><p class="mt-2 text-3xl font-semibold tracking-tight">$24 / seat</p><a href="#tfs-08-h" class="mt-3 inline-flex min-h-11 items-center justify-center rounded-xl text-sm font-semibold transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs08-acc bg-tfs08-acc text-white hover:bg-tfs08-ink">Get started</a></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Projects</span><span class="text-right font-medium">Unlimited</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Support</span><span class="text-right font-medium">Email, 24h</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Audit log retention</span><span class="text-right font-medium">90 days</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">SSO / SAML</span><span class="grid size-6 place-items-center rounded-full bg-tfs08-acc/10 text-tfs08-acc"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Role-based access</span><span class="grid size-6 place-items-center rounded-full bg-tfs08-acc/10 text-tfs08-acc"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">SCIM provisioning</span><span class="text-tfs08-line" aria-hidden="true">—</span><span class="sr-only">Not included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Data residency</span><span class="text-tfs08-line" aria-hidden="true">—</span><span class="sr-only">Not included</span></div>
      </article>
      <article class="relative grid gap-0 rounded-3xl bg-white p-2 lg:row-span-8 lg:grid-rows-subgrid ring-1 ring-tfs08-line">
        <div class="grid gap-2 rounded-2xl bg-tfs08-bg p-6"><h3 class="text-xl font-semibold">Enterprise</h3><p class="text-sm text-tfs08-mut">For orgs with compliance needs</p><p class="mt-2 text-3xl font-semibold tracking-tight">Custom</p><a href="#tfs-08-h" class="mt-3 inline-flex min-h-11 items-center justify-center rounded-xl text-sm font-semibold transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs08-acc bg-white text-tfs08-ink ring-1 ring-tfs08-line hover:ring-tfs08-ink">Talk to sales</a></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Projects</span><span class="text-right font-medium">Unlimited</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Support</span><span class="text-right font-medium">Dedicated Slack, 1h SLA</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Audit log retention</span><span class="text-right font-medium">Unlimited, exportable to S3</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">SSO / SAML</span><span class="grid size-6 place-items-center rounded-full bg-tfs08-acc/10 text-tfs08-acc"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Role-based access</span><span class="grid size-6 place-items-center rounded-full bg-tfs08-acc/10 text-tfs08-acc"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">SCIM provisioning</span><span class="grid size-6 place-items-center rounded-full bg-tfs08-acc/10 text-tfs08-acc"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Included</span></div>
        <div class="flex items-center justify-between gap-4 border-t border-tfs08-line/70 px-6 py-4 text-sm"><span class="text-tfs08-mut">Data residency</span><span class="grid size-6 place-items-center rounded-full bg-tfs08-acc/10 text-tfs08-acc"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Included</span></div>
      </article>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tfs08-bg: #f7f7f8;
  --color-tfs08-bg: oklch(0.976 0.001 0);
  --color-tfs08-ink: #18181b;
  --color-tfs08-ink: oklch(0.21 0.006 286);
  --color-tfs08-mut: #52525b;
  --color-tfs08-mut: oklch(0.442 0.015 286);
  --color-tfs08-line: #e4e4e7;
  --color-tfs08-line: oklch(0.92 0.004 286);
  --color-tfs08-acc: #2563eb;
  --color-tfs08-acc: oklch(0.546 0.215 263);
  --font-tfs08-sans: 'Geist', system-ui, sans-serif;
}
/* 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. */

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

How this works

Subgrid is the alignment. The outer grid has three columns; each card spans eight implicit rows and declares grid-rows-subgrid. Row heights are now negotiated across all three cards, so a wrapped value in Enterprise grows that row everywhere.

Mobile-first readability. Below lg subgrid is off and every card stacks with its own labels — no horizontal-scrolling table on phones.

Make it yours

  • Add a feature: add one row to each card and bump row-span-8 to row-span-9.
  • Move the highlight: shift the ring and badge to another card.
  • Add prices: the header cell already reserves space for a price line.

Gotchas — read before shipping

  • Every card must have the same number of direct children or the subgrid rows misalign.
  • gap on the parent is inherited by subgrid rows — set row gap there, not on the cards.
  • Subgrid needs Chrome 117 / Safari 16 / Firefox 71; older Chrome falls back to independent card heights.

Browser support

ChromeSafariFirefoxEdge
117+16.4+128+117+

Subgrid is the floor (Chrome 117). Older engines show correct cards with unaligned rows.

Techniques used in this demo

Utilitiesfirst-class utility or variant

gridtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →