21 Tailwind CSS Pricing Sections
21 / 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 Annual Savings Stripe Pricing

The anchor-and-discount pattern, stated plainly: the monthly price struck through in orange, the yearly-equivalent price beneath it, and a "Save $84/yr" tab under both. The port's small pleasure is line-through decoration-tps21-orange decoration-2 — the struck price's whole treatment in three utilities, where CSS needs three separate text-decoration-* declarations.

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-21 w-full min-h-svh bg-tps21-bg bg-[radial-gradient(60%_60%_at_50%_0%,--alpha(--color-tps21-green-dark/20),transparent_60%)] font-tps21-sans text-tps21-body px-[clamp(20px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Pricing">
  <header class="text-center mb-[clamp(24px,4vw,36px)]">
    <h2 class="m-0 mb-2 text-[clamp(24px,3.6vw,36px)] font-bold tracking-[-0.02em] text-white">Pay yearly, save real money.</h2>
    <p class="m-0 text-sm text-tps21-muted">Same product, two months free when you commit to a year.</p>
  </header>
  <div class="grid grid-cols-1 md:grid-cols-[repeat(3,minmax(0,1fr))] items-center gap-4 max-w-[380px] md:max-w-[980px] mx-auto">
    <article class="relative flex flex-col px-[22px] pt-6 pb-5 rounded-[14px] bg-tps21-card border border-tps21-green/22">
      <h3 class="m-0 mb-3.5 text-sm font-bold uppercase tracking-[0.1em] text-tps21-mint">Seedling</h3>
      <div class="flex flex-col gap-1 mb-2">
        <span class="text-sm text-tps21-muted line-through decoration-tps21-orange decoration-2" aria-label="Monthly price, was">$15<em class="not-italic text-xs opacity-80">/mo</em></span>
        <span class="flex items-baseline gap-1.5"><strong class="text-[38px] font-extrabold tracking-[-0.03em] text-white">$12</strong><em class="not-italic text-xs text-tps21-muted">/mo billed yearly</em></span>
      </div>
      <span class="self-start mb-[18px] px-2.5 py-0.75 rounded-[4px] bg-tps21-orange text-tps21-bg text-[11px] font-bold tracking-[0.04em]" aria-label="Yearly savings">Save $36/yr</span>
      <ul class="list-none p-0 m-0 mb-5 flex-1 text-[13.5px]/[1.95] text-tps21-list">
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">1 garden</li>
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">30 plant slots</li>
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">Care reminders</li>
      </ul>
      <a href="#seedling" class="block text-center px-4 py-2.75 rounded-[8px] bg-tps21-green/14 text-tps21-mint border border-tps21-green/32 text-[13.5px] font-semibold no-underline transition-[background-color,color] duration-[180ms] hover:bg-tps21-green hover:text-tps21-bg focus-visible:outline-2 focus-visible:outline-tps21-green focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Seedling</a>
    </article>
    <article class="relative flex flex-col px-[22px] pt-6 pb-5 rounded-[14px] bg-linear-180 from-tps21-card-hi to-tps21-card border border-tps21-green md:scale-[1.04] shadow-[inset_0_0_0_1px_--theme(--color-tps21-green),0_14px_36px_--alpha(--color-tps21-green/20)]">
      <span class="absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap px-2.75 py-1 rounded-full bg-tps21-green text-tps21-bg text-[10.5px] font-bold uppercase tracking-[0.08em]">Recommended</span>
      <h3 class="m-0 mb-3.5 text-sm font-bold uppercase tracking-[0.1em] text-tps21-mint">Greenhouse</h3>
      <div class="flex flex-col gap-1 mb-2">
        <span class="text-sm text-tps21-muted line-through decoration-tps21-orange decoration-2" aria-label="Monthly price, was">$36<em class="not-italic text-xs opacity-80">/mo</em></span>
        <span class="flex items-baseline gap-1.5"><strong class="text-[38px] font-extrabold tracking-[-0.03em] text-white">$29</strong><em class="not-italic text-xs text-tps21-muted">/mo billed yearly</em></span>
      </div>
      <span class="self-start mb-[18px] px-2.5 py-0.75 rounded-[4px] bg-tps21-orange text-tps21-bg text-[11px] font-bold tracking-[0.04em]" aria-label="Yearly savings">Save $84/yr</span>
      <ul class="list-none p-0 m-0 mb-5 flex-1 text-[13.5px]/[1.95] text-tps21-list">
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">10 gardens</li>
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">Unlimited slots</li>
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">Disease alerts</li>
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">Soil data sync</li>
      </ul>
      <a href="#greenhouse" class="block text-center px-4 py-2.75 rounded-[8px] bg-tps21-green text-tps21-bg border border-tps21-green text-[13.5px] font-semibold no-underline transition-[filter] duration-[180ms] hover:brightness-110 focus-visible:outline-2 focus-visible:outline-tps21-green focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Greenhouse</a>
    </article>
    <article class="relative flex flex-col px-[22px] pt-6 pb-5 rounded-[14px] bg-tps21-card border border-tps21-green/22">
      <h3 class="m-0 mb-3.5 text-sm font-bold uppercase tracking-[0.1em] text-tps21-mint">Estate</h3>
      <div class="flex flex-col gap-1 mb-2">
        <span class="text-sm text-tps21-muted line-through decoration-tps21-orange decoration-2" aria-label="Monthly price, was">$96<em class="not-italic text-xs opacity-80">/mo</em></span>
        <span class="flex items-baseline gap-1.5"><strong class="text-[38px] font-extrabold tracking-[-0.03em] text-white">$79</strong><em class="not-italic text-xs text-tps21-muted">/mo billed yearly</em></span>
      </div>
      <span class="self-start mb-[18px] px-2.5 py-0.75 rounded-[4px] bg-tps21-orange text-tps21-bg text-[11px] font-bold tracking-[0.04em]" aria-label="Yearly savings">Save $204/yr</span>
      <ul class="list-none p-0 m-0 mb-5 flex-1 text-[13.5px]/[1.95] text-tps21-list">
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">Multi-property</li>
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">Pro APIs</li>
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">Phone support</li>
      </ul>
      <a href="#estate" class="block text-center px-4 py-2.75 rounded-[8px] bg-tps21-green/14 text-tps21-mint border border-tps21-green/32 text-[13.5px] font-semibold no-underline transition-[background-color,color] duration-[180ms] hover:bg-tps21-green hover:text-tps21-bg focus-visible:outline-2 focus-visible:outline-tps21-green focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Estate</a>
    </article>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tps21-bg: #07140e;
  --color-tps21-bg: oklch(0.17 0.03 160);
  --color-tps21-card: #0d2018;
  --color-tps21-card: oklch(0.23 0.04 160);
  --color-tps21-card-hi: #14301f;
  --color-tps21-card-hi: oklch(0.28 0.06 152);
  --color-tps21-body: #e7f5ee;
  --color-tps21-body: oklch(0.95 0.02 160);
  --color-tps21-list: #c8e0d3;
  --color-tps21-list: oklch(0.87 0.03 158);
  --color-tps21-muted: #94b5a3;
  --color-tps21-muted: oklch(0.73 0.04 158);
  --color-tps21-mint: #6ee7b7;
  --color-tps21-mint: oklch(0.86 0.14 165);
  --color-tps21-emerald: #34d399;
  --color-tps21-emerald: oklch(0.78 0.15 163);
  --color-tps21-green: #34996c;
  --color-tps21-green: oklch(0.6 0.11 158);
  --color-tps21-green-dark: #226b48;
  --color-tps21-green-dark: oklch(0.46 0.1 158);
  --color-tps21-orange: #f97316;
  --color-tps21-orange: oklch(0.7 0.19 45);
  --font-tps21-sans: 'Sora', 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 sized correctly in the moment before the
   browser build has compiled its utilities. */

.tps-21 {
  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-tps21-bg: #07140e;
  --color-tps21-bg: oklch(0.17 0.03 160);
  --color-tps21-card: #0d2018;
  --color-tps21-card: oklch(0.23 0.04 160);
  --color-tps21-card-hi: #14301f;
  --color-tps21-card-hi: oklch(0.28 0.06 152);
  --color-tps21-body: #e7f5ee;
  --color-tps21-body: oklch(0.95 0.02 160);
  --color-tps21-list: #c8e0d3;
  --color-tps21-list: oklch(0.87 0.03 158);
  --color-tps21-muted: #94b5a3;
  --color-tps21-muted: oklch(0.73 0.04 158);
  --color-tps21-mint: #6ee7b7;
  --color-tps21-mint: oklch(0.86 0.14 165);
  --color-tps21-emerald: #34d399;
  --color-tps21-emerald: oklch(0.78 0.15 163);
  --color-tps21-green: #34996c;
  --color-tps21-green: oklch(0.6 0.11 158);
  --color-tps21-green-dark: #226b48;
  --color-tps21-green-dark: oklch(0.46 0.1 158);
  --color-tps21-orange: #f97316;
  --color-tps21-orange: oklch(0.7 0.19 45);
  --font-tps21-sans: 'Sora', 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 sized correctly in the moment before the
   browser build has compiled its utilities. */

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

What changed in the port

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

  • Three text-decoration-* declarations become line-through decoration-tps21-orange decoration-2, sitting on the struck price itself. The anchoring device is now legible in the markup rather than hidden behind a .ps-21__was class name.
  • display: inline-block plus align-self: flex-start on the savings tab reduces to self-start — inside a flex column that is all it ever needed.
  • md:scale-[1.04] replaces both the featured card's transform and the 820px media query that unset it.
  • The port adds two things the CSS does not have: aria-labels that say which price you actually pay, and whitespace-nowrap on the pill so the badge cannot wrap at narrow card widths.
  • --alpha(--color-tps21-green/20) and --theme(--color-tps21-green) inside the featured card's shadow replace an rgba() literal and a hex repeat, tying the ring and the glow to the border's own token.
  • Two accent tokens, strictly separated: green for the product, orange for money saved. The orange appears exactly twice in the whole section, which is what makes the savings register as one idea.
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 Annual Savings Stripe Pricing
Source: https://codefronts.com/layouts/tailwind-css-pricing-sections/tailwind-annual-savings-stripe-pricing/

The anchor-and-discount pattern, stated plainly: the monthly price struck through in orange, the yearly-equivalent price beneath it, and a "Save $84/yr" tab under both. The port's small pleasure is line-through decoration-tps21-orange decoration-2 &mdash; the struck price's whole treatment in three utilities, where CSS needs three separate text-decoration-* declarations.
## HTML
```html
<section class="tps-21 w-full min-h-svh bg-tps21-bg bg-[radial-gradient(60%_60%_at_50%_0%,--alpha(--color-tps21-green-dark/20),transparent_60%)] font-tps21-sans text-tps21-body px-[clamp(20px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Pricing">
  <header class="text-center mb-[clamp(24px,4vw,36px)]">
    <h2 class="m-0 mb-2 text-[clamp(24px,3.6vw,36px)] font-bold tracking-[-0.02em] text-white">Pay yearly, save real money.</h2>
    <p class="m-0 text-sm text-tps21-muted">Same product, two months free when you commit to a year.</p>
  </header>
  <div class="grid grid-cols-1 md:grid-cols-[repeat(3,minmax(0,1fr))] items-center gap-4 max-w-[380px] md:max-w-[980px] mx-auto">
    <article class="relative flex flex-col px-[22px] pt-6 pb-5 rounded-[14px] bg-tps21-card border border-tps21-green/22">
      <h3 class="m-0 mb-3.5 text-sm font-bold uppercase tracking-[0.1em] text-tps21-mint">Seedling</h3>
      <div class="flex flex-col gap-1 mb-2">
        <span class="text-sm text-tps21-muted line-through decoration-tps21-orange decoration-2" aria-label="Monthly price, was">$15<em class="not-italic text-xs opacity-80">/mo</em></span>
        <span class="flex items-baseline gap-1.5"><strong class="text-[38px] font-extrabold tracking-[-0.03em] text-white">$12</strong><em class="not-italic text-xs text-tps21-muted">/mo billed yearly</em></span>
      </div>
      <span class="self-start mb-[18px] px-2.5 py-0.75 rounded-[4px] bg-tps21-orange text-tps21-bg text-[11px] font-bold tracking-[0.04em]" aria-label="Yearly savings">Save $36/yr</span>
      <ul class="list-none p-0 m-0 mb-5 flex-1 text-[13.5px]/[1.95] text-tps21-list">
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">1 garden</li>
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">30 plant slots</li>
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">Care reminders</li>
      </ul>
      <a href="#seedling" class="block text-center px-4 py-2.75 rounded-[8px] bg-tps21-green/14 text-tps21-mint border border-tps21-green/32 text-[13.5px] font-semibold no-underline transition-[background-color,color] duration-[180ms] hover:bg-tps21-green hover:text-tps21-bg focus-visible:outline-2 focus-visible:outline-tps21-green focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Seedling</a>
    </article>
    <article class="relative flex flex-col px-[22px] pt-6 pb-5 rounded-[14px] bg-linear-180 from-tps21-card-hi to-tps21-card border border-tps21-green md:scale-[1.04] shadow-[inset_0_0_0_1px_--theme(--color-tps21-green),0_14px_36px_--alpha(--color-tps21-green/20)]">
      <span class="absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap px-2.75 py-1 rounded-full bg-tps21-green text-tps21-bg text-[10.5px] font-bold uppercase tracking-[0.08em]">Recommended</span>
      <h3 class="m-0 mb-3.5 text-sm font-bold uppercase tracking-[0.1em] text-tps21-mint">Greenhouse</h3>
      <div class="flex flex-col gap-1 mb-2">
        <span class="text-sm text-tps21-muted line-through decoration-tps21-orange decoration-2" aria-label="Monthly price, was">$36<em class="not-italic text-xs opacity-80">/mo</em></span>
        <span class="flex items-baseline gap-1.5"><strong class="text-[38px] font-extrabold tracking-[-0.03em] text-white">$29</strong><em class="not-italic text-xs text-tps21-muted">/mo billed yearly</em></span>
      </div>
      <span class="self-start mb-[18px] px-2.5 py-0.75 rounded-[4px] bg-tps21-orange text-tps21-bg text-[11px] font-bold tracking-[0.04em]" aria-label="Yearly savings">Save $84/yr</span>
      <ul class="list-none p-0 m-0 mb-5 flex-1 text-[13.5px]/[1.95] text-tps21-list">
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">10 gardens</li>
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">Unlimited slots</li>
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">Disease alerts</li>
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">Soil data sync</li>
      </ul>
      <a href="#greenhouse" class="block text-center px-4 py-2.75 rounded-[8px] bg-tps21-green text-tps21-bg border border-tps21-green text-[13.5px] font-semibold no-underline transition-[filter] duration-[180ms] hover:brightness-110 focus-visible:outline-2 focus-visible:outline-tps21-green focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Greenhouse</a>
    </article>
    <article class="relative flex flex-col px-[22px] pt-6 pb-5 rounded-[14px] bg-tps21-card border border-tps21-green/22">
      <h3 class="m-0 mb-3.5 text-sm font-bold uppercase tracking-[0.1em] text-tps21-mint">Estate</h3>
      <div class="flex flex-col gap-1 mb-2">
        <span class="text-sm text-tps21-muted line-through decoration-tps21-orange decoration-2" aria-label="Monthly price, was">$96<em class="not-italic text-xs opacity-80">/mo</em></span>
        <span class="flex items-baseline gap-1.5"><strong class="text-[38px] font-extrabold tracking-[-0.03em] text-white">$79</strong><em class="not-italic text-xs text-tps21-muted">/mo billed yearly</em></span>
      </div>
      <span class="self-start mb-[18px] px-2.5 py-0.75 rounded-[4px] bg-tps21-orange text-tps21-bg text-[11px] font-bold tracking-[0.04em]" aria-label="Yearly savings">Save $204/yr</span>
      <ul class="list-none p-0 m-0 mb-5 flex-1 text-[13.5px]/[1.95] text-tps21-list">
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">Multi-property</li>
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">Pro APIs</li>
        <li class="before:content-['\2713'] before:inline-block before:w-5 before:font-bold before:text-tps21-emerald">Phone support</li>
      </ul>
      <a href="#estate" class="block text-center px-4 py-2.75 rounded-[8px] bg-tps21-green/14 text-tps21-mint border border-tps21-green/32 text-[13.5px] font-semibold no-underline transition-[background-color,color] duration-[180ms] hover:bg-tps21-green hover:text-tps21-bg focus-visible:outline-2 focus-visible:outline-tps21-green focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Estate</a>
    </article>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tps21-bg: #07140e;
  --color-tps21-bg: oklch(0.17 0.03 160);
  --color-tps21-card: #0d2018;
  --color-tps21-card: oklch(0.23 0.04 160);
  --color-tps21-card-hi: #14301f;
  --color-tps21-card-hi: oklch(0.28 0.06 152);
  --color-tps21-body: #e7f5ee;
  --color-tps21-body: oklch(0.95 0.02 160);
  --color-tps21-list: #c8e0d3;
  --color-tps21-list: oklch(0.87 0.03 158);
  --color-tps21-muted: #94b5a3;
  --color-tps21-muted: oklch(0.73 0.04 158);
  --color-tps21-mint: #6ee7b7;
  --color-tps21-mint: oklch(0.86 0.14 165);
  --color-tps21-emerald: #34d399;
  --color-tps21-emerald: oklch(0.78 0.15 163);
  --color-tps21-green: #34996c;
  --color-tps21-green: oklch(0.6 0.11 158);
  --color-tps21-green-dark: #226b48;
  --color-tps21-green-dark: oklch(0.46 0.1 158);
  --color-tps21-orange: #f97316;
  --color-tps21-orange: oklch(0.7 0.19 45);
  --font-tps21-sans: 'Sora', 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 sized correctly in the moment before the
   browser build has compiled its utilities. */

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

How this works

Three utilities carry the whole anchoring device. The struck price needs a colour that is not its text colour and a thickness that survives at 14px:

class="line-through decoration-tps21-orange decoration-2 text-tps21-muted"

In CSS that is text-decoration, text-decoration-color and text-decoration-thickness in three declarations on a class you have to name. Here the element says what it is.

The savings figure is the only thing in orange. Two accents, strictly divided: green is the product, orange is money you keep. The strike and the tab are the only orange in the design, which is what makes them read as one idea rather than as decoration.

The price stack is two lines, not a toggle. This demo deliberately shows both numbers at once — no billing switch, no state. Anchoring only works if the anchor is visible, and a toggle hides half the comparison behind an interaction.

Labels for the parts that mean nothing aloud. A struck-through "$15/mo" is instantly legible by eye and completely ambiguous to a screen reader, so both spans carry an aria-label. This is the one place the port adds accessibility the CSS version does not have.

Make it yours

  • The numbers: three was/now/save triplets. Keep them arithmetically honest — (was &minus; now) × 12 — or the pattern reads as a trick.
  • Strike colour: decoration-tps21-orange. It must differ from the text colour, or the strike disappears into the price.
  • Strike weight: decoration-2. At decoration-1 the line is nearly invisible on a 14px price.
  • Palette: --color-tps21-green for the product and --color-tps21-orange for the savings. Adding a third accent is what makes this layout look like a coupon.
  • Lift: md:scale-[1.04]. With three visibly different savings figures, the scale is optional emphasis.

Gotchas — read before shipping

  • Label both price spans. "$15/mo, $12/mo" with no context is what a screen reader reads without the aria-labels — two prices and no indication which one you pay.
  • decoration-2 matters more than it looks. A 1px strike on a 14px price at a normal viewing distance is easy to miss entirely, which turns the anchor into a typo.
  • Keep the savings arithmetic correct. $36 → $29 is $84 a year; a rounded-up figure is the fastest way to lose trust on a pricing page.
  • self-start on the savings tab is required — inside a flex flex-col card it would otherwise stretch to the full card width and stop reading as a tab.
  • Only orange for savings. Once a third colour appears, the eye stops associating orange with money and the device stops working.
  • items-baseline on the discounted price row: without it the /mo billed yearly qualifier aligns to the 38px line box and floats above the baseline.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

text-decoration-color and text-decoration-thickness are Baseline (Chrome 87, Safari 12.1, Firefox 70). Everything else is a grid, a border and a badge — this is the most conservative demo in the set.

Techniques used in this demo

Utilitiesfirst-class utility or variant

radial-gradient()tw ↗transitionstw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →