21 Tailwind CSS Pricing Sections
03 / 21

All 21 in 21 Tailwind CSS Pricing Sections

  1. 01Tailwind Classic Three Tier Pricing Section
  2. 02Tailwind Highlighted Popular Pricing Tier
  3. 03Tailwind Feature Comparison Pricing Table
  4. 04Tailwind Monthly Yearly Billing Toggle Pricing
  5. 05Tailwind Usage Slider Pricing Estimator
  6. 06Tailwind Single Premium Pricing Card
  7. 07Tailwind Bento Pricing Grid
  8. 08Tailwind Vertical Tier Timeline Pricing
  9. 09Tailwind Brutalist Print Pricing Zine
  10. 10Tailwind Glass Aurora Pricing Cards
  11. 11Tailwind Per-Seat Pricing Calculator
  12. 12Tailwind Animated Conic Border Pricing Cards
  13. 13Tailwind Editorial Two Column Pricing List
  14. 14Tailwind 3D Tilt Perspective Pricing Cards
  15. 15Tailwind Synthwave Neon Pricing Section
  16. 16Tailwind Pay What You Want Pricing Card
  17. 17Tailwind Currency Switcher Pricing Section
  18. 18Tailwind Social Proof Marquee Pricing
  19. 19Tailwind Feature Accordion Pricing Tiers
  20. 20Tailwind Cursor Spotlight Pricing Cards
  21. 21Tailwind Annual Savings Stripe Pricing
Pure TailwindMIT licensed

Tailwind Feature Comparison Pricing Table

Nine features, four plans, one real <table> with <th scope> on both axes. The port's lesson is where utilities are weakest: a table's shared cell styling has no ancestor shortcut, so every <td> carries its own class list — and the recommended column's guide-rail tint becomes a per-cell utility instead of one selector.

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="tps-03 w-full min-h-svh bg-tps03-bg font-tps03-sans text-tps03-ink px-[clamp(16px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Plan comparison">
  <header class="text-center mb-[clamp(20px,4vw,36px)]">
    <h2 class="m-0 mb-2 text-[clamp(22px,3.2vw,32px)] font-bold tracking-[-0.02em] text-tps03-bright text-pretty">Compare every feature.</h2>
    <p class="m-0 text-sm text-tps03-mut">Pick the column that matches what you ship today.</p>
  </header>
  <div class="max-w-[980px] mx-auto pt-3.5 pb-2 md:pb-0 overflow-x-auto overflow-y-visible [-webkit-overflow-scrolling:touch]">
    <table class="w-full min-w-[720px] border-separate border-spacing-0 text-xs md:text-[13.5px]">
      <thead>
        <tr>
          <th scope="col" class="p-2 md:p-3.5 text-left font-medium text-tps03-mut border-b border-tps03-edge">Feature</th>
          <th scope="col" class="p-2 md:p-3.5 text-center text-[13px] md:text-sm font-bold text-tps03-head2 bg-tps03-head border-b border-tps03-edge">Free<br><span class="block mt-1 text-[13px] font-medium text-tps03-mut">$0</span></th>
          <th scope="col" class="relative p-2 md:p-3.5 text-center text-[13px] md:text-sm font-bold text-tps03-acc2 bg-linear-to-b from-tps03-rec3 to-tps03-rec2 border-b border-tps03-edge">
            <span class="absolute -top-2.5 left-1/2 -translate-x-1/2 px-1.5 md:px-2.5 py-0.5 rounded-full bg-tps03-acc text-tps03-bg text-[9px] md:text-[10px] font-bold uppercase tracking-[0.08em] whitespace-nowrap">Recommended</span>Pro<br><span class="block mt-1 text-[13px] font-medium text-tps03-mut">$24</span>
          </th>
          <th scope="col" class="p-2 md:p-3.5 text-center text-[13px] md:text-sm font-bold text-tps03-head2 bg-tps03-head border-b border-tps03-edge">Team<br><span class="block mt-1 text-[13px] font-medium text-tps03-mut">$48</span></th>
          <th scope="col" class="p-2 md:p-3.5 text-center text-[13px] md:text-sm font-bold text-tps03-head2 bg-tps03-head border-b border-tps03-edge">Enterprise<br><span class="block mt-1 text-[13px] font-medium text-tps03-mut">Contact</span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">Projects</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge">1</td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec text-tps03-acc">10</td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge">50</td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge">Unlimited</td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">Storage</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge">500 MB</td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec text-tps03-acc">10 GB</td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge">50 GB</td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge">500 GB</td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">Custom domain</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">Team roles</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">Priority support</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">SSO &amp; SAML</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">Audit logs</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">99.99% SLA</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">Dedicated CSM</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 pt-4.5 text-left"><span class="sr-only">Choose a plan</span></th>
          <td class="px-2 md:px-3.5 pt-4.5 pb-1 text-center"><a href="#free" class="inline-block px-4 py-2.25 rounded-[7px] text-[12.5px] font-semibold no-underline text-tps03-acc2 border border-tps03-ctaedge transition-[background-color,color] duration-200 hover:bg-tps03-chip hover:text-tps03-bright focus-visible:outline-2 focus-visible:outline-tps03-acc focus-visible:outline-offset-3 motion-reduce:transition-none">Get started</a></td>
          <td class="px-2 md:px-3.5 pt-4.5 pb-1 text-center bg-tps03-rec"><a href="#pro" class="inline-block px-4 py-2.25 rounded-[7px] text-[12.5px] font-semibold no-underline bg-tps03-acc text-tps03-bg border border-tps03-acc transition-[background-color] duration-200 hover:bg-tps03-acc2 focus-visible:outline-2 focus-visible:outline-tps03-acc focus-visible:outline-offset-3 motion-reduce:transition-none">Choose Pro &rarr;</a></td>
          <td class="px-2 md:px-3.5 pt-4.5 pb-1 text-center"><a href="#team" class="inline-block px-4 py-2.25 rounded-[7px] text-[12.5px] font-semibold no-underline text-tps03-acc2 border border-tps03-ctaedge transition-[background-color,color] duration-200 hover:bg-tps03-chip hover:text-tps03-bright focus-visible:outline-2 focus-visible:outline-tps03-acc focus-visible:outline-offset-3 motion-reduce:transition-none">Choose Team</a></td>
          <td class="px-2 md:px-3.5 pt-4.5 pb-1 text-center"><a href="#ent" class="inline-block px-4 py-2.25 rounded-[7px] text-[12.5px] font-semibold no-underline text-tps03-acc2 border border-tps03-ctaedge transition-[background-color,color] duration-200 hover:bg-tps03-chip hover:text-tps03-bright focus-visible:outline-2 focus-visible:outline-tps03-acc focus-visible:outline-offset-3 motion-reduce:transition-none">Talk to sales</a></td>
        </tr>
      </tfoot>
    </table>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tps03-bg: #06141a;
  --color-tps03-bg: oklch(0.16 0.02 220);
  --color-tps03-head: #0c1f27;
  --color-tps03-head: oklch(0.22 0.02 220);
  --color-tps03-edge: #133540;
  --color-tps03-edge: oklch(0.3 0.03 220);
  --color-tps03-ctaedge: #1d6a7c;
  --color-tps03-ctaedge: oklch(0.48 0.07 215);
  --color-tps03-rec: #0a2630;
  --color-tps03-rec: oklch(0.24 0.03 215);
  --color-tps03-rec2: #0b2c37;
  --color-tps03-rec2: oklch(0.26 0.035 213);
  --color-tps03-rec3: #17505f;
  --color-tps03-rec3: oklch(0.4 0.06 213);
  --color-tps03-chip: #114352;
  --color-tps03-chip: oklch(0.35 0.05 213);
  --color-tps03-ink: #e0f2f7;
  --color-tps03-ink: oklch(0.94 0.02 215);
  --color-tps03-bright: #f1fbff;
  --color-tps03-bright: oklch(0.98 0.01 215);
  --color-tps03-head2: #cfeaf2;
  --color-tps03-head2: oklch(0.91 0.03 215);
  --color-tps03-mut: #88a8b3;
  --color-tps03-mut: oklch(0.7 0.03 215);
  --color-tps03-dim: #5b7480;
  --color-tps03-dim: oklch(0.52 0.03 220);
  --color-tps03-acc: #22d3ee;
  --color-tps03-acc: oklch(0.8 0.14 200);
  --color-tps03-acc2: #5eead4;
  --color-tps03-acc2: oklch(0.87 0.12 175);
  --font-tps03-sans: 'Inter', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is correctly sized in the moment before the
   browser build has compiled its utilities. */

.tps-03 {
  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-tps03-bg: #06141a;
  --color-tps03-bg: oklch(0.16 0.02 220);
  --color-tps03-head: #0c1f27;
  --color-tps03-head: oklch(0.22 0.02 220);
  --color-tps03-edge: #133540;
  --color-tps03-edge: oklch(0.3 0.03 220);
  --color-tps03-ctaedge: #1d6a7c;
  --color-tps03-ctaedge: oklch(0.48 0.07 215);
  --color-tps03-rec: #0a2630;
  --color-tps03-rec: oklch(0.24 0.03 215);
  --color-tps03-rec2: #0b2c37;
  --color-tps03-rec2: oklch(0.26 0.035 213);
  --color-tps03-rec3: #17505f;
  --color-tps03-rec3: oklch(0.4 0.06 213);
  --color-tps03-chip: #114352;
  --color-tps03-chip: oklch(0.35 0.05 213);
  --color-tps03-ink: #e0f2f7;
  --color-tps03-ink: oklch(0.94 0.02 215);
  --color-tps03-bright: #f1fbff;
  --color-tps03-bright: oklch(0.98 0.01 215);
  --color-tps03-head2: #cfeaf2;
  --color-tps03-head2: oklch(0.91 0.03 215);
  --color-tps03-mut: #88a8b3;
  --color-tps03-mut: oklch(0.7 0.03 215);
  --color-tps03-dim: #5b7480;
  --color-tps03-dim: oklch(0.52 0.03 220);
  --color-tps03-acc: #22d3ee;
  --color-tps03-acc: oklch(0.8 0.14 200);
  --color-tps03-acc2: #5eead4;
  --color-tps03-acc2: oklch(0.87 0.12 175);
  --font-tps03-sans: 'Inter', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is correctly sized in the moment before the
   browser build has compiled its utilities. */

.tps-03 {
  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=Inter:wght@400;500;600;700&display=swap">

What changed in the port

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

  • This is the collection's clearest case AGAINST utilities for a moment: .ps-03__tbl th, .ps-03__tbl td styles 55 cells in one rule, and the port repeats that class list on each. The fix in a codebase is a cell component, not @apply.
  • In exchange, the four !important declarations on the corner cell disappear: there is no inherited header rule to override, so the corner cell just omits the classes.
  • The recommended column's tint stops being a single .ps-03__rec class and becomes bg-tps03-rec on each of its eleven cells — more typing, but the guide-rail is now visible in the row you are reading.
  • The 720px density media query becomes text-xs md:text-[13.5px] and p-2 md:p-3.5 per cell — mobile-first inverted from the CSS version's desktop-first override.
  • overflow-x-auto, min-w-[720px] and [-webkit-overflow-scrolling:touch] are the entire mobile strategy, unchanged in substance from the original.
  • The empty <th> in <tfoot> gains an sr-only label — a small accessibility upgrade the port made possible, since sr-only is a utility instead of a hand-written clip rect.
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 Feature Comparison Pricing Table
Source: https://codefronts.com/layouts/tailwind-css-pricing-sections/tailwind-feature-comparison-pricing-table/

Nine features, four plans, one real <table> with <th scope> on both axes. The port's lesson is where utilities are weakest: a table's shared cell styling has no ancestor shortcut, so every <td> carries its own class list &mdash; and the recommended column's guide-rail tint becomes a per-cell utility instead of one selector.
## HTML
```html
<section class="tps-03 w-full min-h-svh bg-tps03-bg font-tps03-sans text-tps03-ink px-[clamp(16px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Plan comparison">
  <header class="text-center mb-[clamp(20px,4vw,36px)]">
    <h2 class="m-0 mb-2 text-[clamp(22px,3.2vw,32px)] font-bold tracking-[-0.02em] text-tps03-bright text-pretty">Compare every feature.</h2>
    <p class="m-0 text-sm text-tps03-mut">Pick the column that matches what you ship today.</p>
  </header>
  <div class="max-w-[980px] mx-auto pt-3.5 pb-2 md:pb-0 overflow-x-auto overflow-y-visible [-webkit-overflow-scrolling:touch]">
    <table class="w-full min-w-[720px] border-separate border-spacing-0 text-xs md:text-[13.5px]">
      <thead>
        <tr>
          <th scope="col" class="p-2 md:p-3.5 text-left font-medium text-tps03-mut border-b border-tps03-edge">Feature</th>
          <th scope="col" class="p-2 md:p-3.5 text-center text-[13px] md:text-sm font-bold text-tps03-head2 bg-tps03-head border-b border-tps03-edge">Free<br><span class="block mt-1 text-[13px] font-medium text-tps03-mut">$0</span></th>
          <th scope="col" class="relative p-2 md:p-3.5 text-center text-[13px] md:text-sm font-bold text-tps03-acc2 bg-linear-to-b from-tps03-rec3 to-tps03-rec2 border-b border-tps03-edge">
            <span class="absolute -top-2.5 left-1/2 -translate-x-1/2 px-1.5 md:px-2.5 py-0.5 rounded-full bg-tps03-acc text-tps03-bg text-[9px] md:text-[10px] font-bold uppercase tracking-[0.08em] whitespace-nowrap">Recommended</span>Pro<br><span class="block mt-1 text-[13px] font-medium text-tps03-mut">$24</span>
          </th>
          <th scope="col" class="p-2 md:p-3.5 text-center text-[13px] md:text-sm font-bold text-tps03-head2 bg-tps03-head border-b border-tps03-edge">Team<br><span class="block mt-1 text-[13px] font-medium text-tps03-mut">$48</span></th>
          <th scope="col" class="p-2 md:p-3.5 text-center text-[13px] md:text-sm font-bold text-tps03-head2 bg-tps03-head border-b border-tps03-edge">Enterprise<br><span class="block mt-1 text-[13px] font-medium text-tps03-mut">Contact</span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">Projects</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge">1</td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec text-tps03-acc">10</td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge">50</td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge">Unlimited</td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">Storage</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge">500 MB</td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec text-tps03-acc">10 GB</td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge">50 GB</td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge">500 GB</td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">Custom domain</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">Team roles</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">Priority support</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">SSO &amp; SAML</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">Audit logs</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">99.99% SLA</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
        </tr>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 text-left font-medium text-tps03-head2 border-b border-tps03-edge">Dedicated CSM</th>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge bg-tps03-rec"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="font-medium text-tps03-dim" aria-label="not included">&mdash;</span></td>
          <td class="p-2 md:p-3.5 text-center border-b border-tps03-edge"><span class="inline-grid place-items-center w-5.5 h-5.5 rounded-full bg-tps03-chip text-tps03-acc font-bold" aria-label="included">&#10003;</span></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row" class="p-2 md:p-3.5 pt-4.5 text-left"><span class="sr-only">Choose a plan</span></th>
          <td class="px-2 md:px-3.5 pt-4.5 pb-1 text-center"><a href="#free" class="inline-block px-4 py-2.25 rounded-[7px] text-[12.5px] font-semibold no-underline text-tps03-acc2 border border-tps03-ctaedge transition-[background-color,color] duration-200 hover:bg-tps03-chip hover:text-tps03-bright focus-visible:outline-2 focus-visible:outline-tps03-acc focus-visible:outline-offset-3 motion-reduce:transition-none">Get started</a></td>
          <td class="px-2 md:px-3.5 pt-4.5 pb-1 text-center bg-tps03-rec"><a href="#pro" class="inline-block px-4 py-2.25 rounded-[7px] text-[12.5px] font-semibold no-underline bg-tps03-acc text-tps03-bg border border-tps03-acc transition-[background-color] duration-200 hover:bg-tps03-acc2 focus-visible:outline-2 focus-visible:outline-tps03-acc focus-visible:outline-offset-3 motion-reduce:transition-none">Choose Pro &rarr;</a></td>
          <td class="px-2 md:px-3.5 pt-4.5 pb-1 text-center"><a href="#team" class="inline-block px-4 py-2.25 rounded-[7px] text-[12.5px] font-semibold no-underline text-tps03-acc2 border border-tps03-ctaedge transition-[background-color,color] duration-200 hover:bg-tps03-chip hover:text-tps03-bright focus-visible:outline-2 focus-visible:outline-tps03-acc focus-visible:outline-offset-3 motion-reduce:transition-none">Choose Team</a></td>
          <td class="px-2 md:px-3.5 pt-4.5 pb-1 text-center"><a href="#ent" class="inline-block px-4 py-2.25 rounded-[7px] text-[12.5px] font-semibold no-underline text-tps03-acc2 border border-tps03-ctaedge transition-[background-color,color] duration-200 hover:bg-tps03-chip hover:text-tps03-bright focus-visible:outline-2 focus-visible:outline-tps03-acc focus-visible:outline-offset-3 motion-reduce:transition-none">Talk to sales</a></td>
        </tr>
      </tfoot>
    </table>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tps03-bg: #06141a;
  --color-tps03-bg: oklch(0.16 0.02 220);
  --color-tps03-head: #0c1f27;
  --color-tps03-head: oklch(0.22 0.02 220);
  --color-tps03-edge: #133540;
  --color-tps03-edge: oklch(0.3 0.03 220);
  --color-tps03-ctaedge: #1d6a7c;
  --color-tps03-ctaedge: oklch(0.48 0.07 215);
  --color-tps03-rec: #0a2630;
  --color-tps03-rec: oklch(0.24 0.03 215);
  --color-tps03-rec2: #0b2c37;
  --color-tps03-rec2: oklch(0.26 0.035 213);
  --color-tps03-rec3: #17505f;
  --color-tps03-rec3: oklch(0.4 0.06 213);
  --color-tps03-chip: #114352;
  --color-tps03-chip: oklch(0.35 0.05 213);
  --color-tps03-ink: #e0f2f7;
  --color-tps03-ink: oklch(0.94 0.02 215);
  --color-tps03-bright: #f1fbff;
  --color-tps03-bright: oklch(0.98 0.01 215);
  --color-tps03-head2: #cfeaf2;
  --color-tps03-head2: oklch(0.91 0.03 215);
  --color-tps03-mut: #88a8b3;
  --color-tps03-mut: oklch(0.7 0.03 215);
  --color-tps03-dim: #5b7480;
  --color-tps03-dim: oklch(0.52 0.03 220);
  --color-tps03-acc: #22d3ee;
  --color-tps03-acc: oklch(0.8 0.14 200);
  --color-tps03-acc2: #5eead4;
  --color-tps03-acc2: oklch(0.87 0.12 175);
  --font-tps03-sans: 'Inter', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is correctly sized in the moment before the
   browser build has compiled its utilities. */

.tps-03 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

The table stays a table. Every accessibility property of the CSS original survives untouched, because none of it was styling:

<th scope="col" class="relative bg-tps03-head …">
  <span class="absolute -top-2.5 left-1/2 -translate-x-1/2 …">Recommended</span>Pro
</th>
…
<th scope="row" class="text-left font-medium …">Projects</th>

Where the port costs something. The CSS version writes .ps-03__tbl th, .ps-03__tbl td { … } once and every cell inherits. Utilities have no descendant form, so the padding, centring and hairline border repeat on all 55 cells. That is the honest trade, and it is why this demo is the collection's argument for a row component in any real codebase — not for @apply, which would just rebuild the CSS version with extra steps.

The first column resets, without !important. The original needs four !important declarations to strip the header treatment off the corner cell. In utilities the corner cell simply never receives those classes: there is no inherited rule to fight. Specificity wars are the one thing utilities genuinely delete.

The em-dash keeps its label. text-tps03-dim clears 3:1 as a non-text graphic but not 4.5:1 as text, so the aria-label="not included" from the CSS version stays exactly where it was — utilities change nothing about that contract.

Make it yours

  • Recolour through --color-tps03-acc plus --color-tps03-rec (the column tint). Keep the tint near 6% alpha; past 10% it starts flattening the row headers under it.
  • Move the recommendation: the bg-tps03-rec text-tps03-acc pair and the gradient header move together to another column's cells. Nothing else is column-aware.
  • Marker style: swap the chip span for an inline SVG, or drop bg-tps03-chip rounded-full for a bare accent glyph if you want a lighter table.
  • Row density: the cells' p-2 md:p-3.5 is the only knob; drop to md:p-2.5 for a compliance-matrix look with twenty rows.
  • Light mode: invert --color-tps03-bg/--color-tps03-ink and darken --color-tps03-acc two steps — bright cyan text disappears on cream.

Gotchas — read before shipping

  • An ancestor with overflow-hidden eats the horizontal scroll gesture and the Enterprise column becomes unreachable on mobile. Audit the parent chain before shipping.
  • Never force a mobile layout with block on cells — it strips the implicit table roles and screen readers announce a list, destroying the WCAG 1.3.1 comparison semantics. Scroll, or ship a separate <dl>.
  • border-separate is required for the rounded pill and the gradient header cell. With border-collapse both silently fail.
  • The pill needs relative on the <th>. Table cells accept it in Chrome 108+ and Safari 15.4+; older Firefox ESR needs an inner wrapper.
  • Do not conditionally unmount feature rows behind a &ldquo;show more&rdquo; toggle — the table re-runs its min-width layout and the CLS lands on your pricing page. Animate opacity and keep the rows in the DOM.
  • Every cell's class list must be statically visible to the compiler. Generating the recommended column's classes from a runtime tier index emits no CSS.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Everything in the table itself is universally supported; -webkit-overflow-scrolling stays an iOS nicety. The floor quoted here is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

linear gradienttw ↗transitionstw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →