21 Tailwind CSS Pricing Tables
13 / 21

All 21 in 21 Tailwind CSS Pricing Tables

  1. 01Tailwind CSS Pricing Table with Monthly / Annual Toggle
  2. 02Tailwind Pricing Table with Currency Switcher (USD, GBP, EUR, AUD)
  3. 03Tailwind CSS Pricing Comparison Table with Expandable Features
  4. 04Tailwind Dark Mode Pricing Cards with Light / Dark Toggle
  5. 05Tailwind Pricing Cards with Hover Scale Effect
  6. 06Tailwind "Most Popular" Pricing Card with Animated Border Beam
  7. 07Tailwind Pricing Cards with Animated Discount Badges
  8. 08Tailwind Pricing Table CTA Button Hover Animation
  9. 09Tailwind Pricing Cards with Color-Changing Hover Themes
  10. 10Tailwind CSS 3D Flip Pricing Cards
  11. 11Tailwind Pricing Slider Calculator for Per-Seat Pricing
  12. 12Tailwind Tabbed Pricing Table for Multiple Products
  13. 13Tailwind Pricing Cards with Usage Meters & Progress Bars
  14. 14Tailwind Bundle Pricing Calculator with Checkboxes
  15. 15Glassmorphism Pricing Cards in Tailwind CSS
  16. 16Tailwind Pricing Card with Animated Gradient Border on Hover
  17. 17Tailwind Pricing Cards with Corner Ribbon & Bookmark Banner
  18. 18Neumorphic Pricing Table in Tailwind CSS (Soft UI)
  19. 19Mobile Swipe Pricing Carousel with Tailwind Scroll Snap
  20. 20Responsive Tailwind Pricing Table that Stacks into an Accordion
  21. 21Tailwind Pricing Cards with Skeleton Loading Shimmer
Tailwind v4MIT licensed

Tailwind Pricing Cards with Usage Meters & Progress Bars

Show, don't tell, which plan fits: each card measures your current usage against its limits, bars sweep in as the section scrolls into view, and they turn amber near a limit and red past it. The sweep is a v4 animation token plus two arbitrary properties — [animation-timeline:view()] and [animation-range:entry_0%_entry_60%] — and each bar's fill is a single [--tpt13-fill:.42].

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="tpt-13 w-full min-h-svh grid place-items-center bg-tpt13-bg px-5 py-16 font-tpt13-sans text-tpt13-ink antialiased" aria-label="Pricing with usage meters">
  <div class="grid w-full max-w-5xl justify-items-center gap-10">
    <header class="grid justify-items-center gap-3 text-center">
      <h2 class="text-[clamp(26px,3.8vw,40px)] font-bold tracking-[-0.03em] text-balance">See exactly what fits</h2>
      <p class="rounded-full bg-white px-4 py-2 text-sm text-tpt13-body ring-1 ring-tpt13-line">Your usage: <strong class="font-semibold text-tpt13-ink">42 projects · 180 GB · 8 seats</strong></p>
    </header>
    <div class="grid w-full gap-5 md:grid-cols-3">
      <article class="flex flex-col gap-4 rounded-[20px] border border-tpt13-line bg-white p-7">
        <div class="flex items-baseline justify-between"><h3 class="text-[13px] font-semibold tracking-[0.08em] text-tpt13-mut uppercase">Free</h3><span class="rounded-full bg-tpt13-over/10 px-2.5 py-0.5 text-[11px] font-semibold text-tpt13-over-ink">Over limits</span></div>
        <p class="text-[42px] leading-none font-bold tracking-[-0.035em]">$0</p>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Projects</span><b class="font-semibold text-tpt13-over-ink tabular-nums">42 of 3</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Projects" aria-valuemin="0" aria-valuemax="3" aria-valuenow="3" aria-valuetext="42 of 3, over limit"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-over [--tpt13-fill:1] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Storage</span><b class="font-semibold text-tpt13-over-ink tabular-nums">180 of 2 GB</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Storage" aria-valuemin="0" aria-valuemax="2" aria-valuenow="2" aria-valuetext="180 of 2 GB, over limit"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-over [--tpt13-fill:1] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Seats</span><b class="font-semibold text-tpt13-over-ink tabular-nums">8 of 1</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Seats" aria-valuemin="0" aria-valuemax="1" aria-valuenow="1" aria-valuetext="8 of 1, over limit"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-over [--tpt13-fill:1] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <a href="#" class="mt-auto grid min-h-11 place-items-center rounded-xl border-[1.5px] border-tpt13-line text-sm font-semibold text-tpt13-ink no-underline transition-colors hover:border-tpt13-acc focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-tpt13-acc">Start free</a>
      </article>
      <article class="relative flex flex-col gap-4 rounded-[20px] bg-white p-7 shadow-[0_18px_40px_-26px_var(--color-tpt13-acc)] ring-2 ring-tpt13-acc">
        <div class="flex items-baseline justify-between"><h3 class="text-[13px] font-semibold tracking-[0.08em] text-tpt13-acc-ink uppercase">Pro</h3><span class="rounded-full bg-tpt13-acc px-2.5 py-0.5 text-[11px] font-semibold text-white">Fits your usage</span></div>
        <p class="text-[42px] leading-none font-bold tracking-[-0.035em]">$24<small class="text-[15px] font-medium tracking-normal text-tpt13-mut">/mo</small></p>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Projects</span><b class="font-semibold text-tpt13-ink tabular-nums">42 of 100</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Projects" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42" aria-valuetext="42 of 100"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-ok [--tpt13-fill:.42] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Storage</span><b class="font-semibold text-tpt13-ink tabular-nums">180 of 250 GB</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Storage" aria-valuemin="0" aria-valuemax="250" aria-valuenow="180" aria-valuetext="180 of 250 GB"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-ok [--tpt13-fill:.72] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Seats</span><b class="font-semibold text-tpt13-warn-ink tabular-nums">8 of 10</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Seats" aria-valuemin="0" aria-valuemax="10" aria-valuenow="8" aria-valuetext="8 of 10, near limit"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-warn [--tpt13-fill:.8] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <a href="#" class="mt-auto grid min-h-11 place-items-center rounded-xl bg-tpt13-acc text-sm font-semibold text-white no-underline transition-colors hover:bg-tpt13-acc-ink focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-tpt13-acc">Go Pro</a>
      </article>
      <article class="flex flex-col gap-4 rounded-[20px] border border-tpt13-line bg-white p-7">
        <div class="flex items-baseline justify-between"><h3 class="text-[13px] font-semibold tracking-[0.08em] text-tpt13-mut uppercase">Max</h3><span class="rounded-full bg-tpt13-track px-2.5 py-0.5 text-[11px] font-semibold text-tpt13-mut">Room to grow</span></div>
        <p class="text-[42px] leading-none font-bold tracking-[-0.035em]">$59<small class="text-[15px] font-medium tracking-normal text-tpt13-mut">/mo</small></p>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Projects</span><b class="font-semibold text-tpt13-ink tabular-nums">42 of unlimited</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Projects" aria-valuemin="0" aria-valuemax="1000" aria-valuenow="42" aria-valuetext="42, unlimited plan"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-ok [--tpt13-fill:.04] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Storage</span><b class="font-semibold text-tpt13-ink tabular-nums">180 GB of 2 TB</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Storage" aria-valuemin="0" aria-valuemax="2000" aria-valuenow="180" aria-valuetext="180 GB of 2 TB"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-ok [--tpt13-fill:.09] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Seats</span><b class="font-semibold text-tpt13-ink tabular-nums">8 of unlimited</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Seats" aria-valuemin="0" aria-valuemax="200" aria-valuenow="8" aria-valuetext="8, unlimited plan"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-ok [--tpt13-fill:.04] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <a href="#" class="mt-auto grid min-h-11 place-items-center rounded-xl border-[1.5px] border-tpt13-line text-sm font-semibold text-tpt13-ink no-underline transition-colors hover:border-tpt13-acc focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-tpt13-acc">Go Max</a>
      </article>
    </div>
    <p aria-hidden="true" class="rounded-full border border-tpt13-line bg-white px-3.5 py-2 font-tpt13-mono text-[11.5px] text-tpt13-mut">[animation-timeline:view()] · [scale:var(--tpt13-fill)_1] · role="meter"</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tpt13-bg: #f3f6fa;
  --color-tpt13-bg: oklch(0.97 0.007 245);
  --color-tpt13-track: #e6ebf2;
  --color-tpt13-track: oklch(0.94 0.01 245);
  --color-tpt13-ink: #141c24;
  --color-tpt13-ink: oklch(0.22 0.02 245);
  --color-tpt13-body: #44515f;
  --color-tpt13-body: oklch(0.43 0.03 245);
  --color-tpt13-mut: #586779;
  --color-tpt13-mut: oklch(0.5 0.03 245);
  --color-tpt13-line: #dce4ec;
  --color-tpt13-line: oklch(0.91 0.012 245);
  --color-tpt13-acc: #1780cc;
  --color-tpt13-acc: oklch(0.58 0.15 245);
  --color-tpt13-acc-ink: #0e619e;
  --color-tpt13-acc-ink: oklch(0.49 0.13 248);
  --color-tpt13-ok: #2b95d6;
  --color-tpt13-ok: oklch(0.64 0.14 240);
  --color-tpt13-warn: #eba417;
  --color-tpt13-warn: oklch(0.77 0.16 75);
  --color-tpt13-warn-ink: #955f00;
  --color-tpt13-warn-ink: oklch(0.52 0.12 70);
  --color-tpt13-over: #de3b3b;
  --color-tpt13-over: oklch(0.6 0.2 25);
  --color-tpt13-over-ink: #b3262a;
  --color-tpt13-over-ink: oklch(0.52 0.19 25);
  --font-tpt13-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-tpt13-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-tpt13-sweep: tpt13-sweep 1s cubic-bezier(0.3, 0, 0.2, 1) both;

  @keyframes tpt13-sweep {
    from {
      scale: 0 1;
    }
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities. */

.tpt-13 {
  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-tpt13-bg: #f3f6fa;
  --color-tpt13-bg: oklch(0.97 0.007 245);
  --color-tpt13-track: #e6ebf2;
  --color-tpt13-track: oklch(0.94 0.01 245);
  --color-tpt13-ink: #141c24;
  --color-tpt13-ink: oklch(0.22 0.02 245);
  --color-tpt13-body: #44515f;
  --color-tpt13-body: oklch(0.43 0.03 245);
  --color-tpt13-mut: #586779;
  --color-tpt13-mut: oklch(0.5 0.03 245);
  --color-tpt13-line: #dce4ec;
  --color-tpt13-line: oklch(0.91 0.012 245);
  --color-tpt13-acc: #1780cc;
  --color-tpt13-acc: oklch(0.58 0.15 245);
  --color-tpt13-acc-ink: #0e619e;
  --color-tpt13-acc-ink: oklch(0.49 0.13 248);
  --color-tpt13-ok: #2b95d6;
  --color-tpt13-ok: oklch(0.64 0.14 240);
  --color-tpt13-warn: #eba417;
  --color-tpt13-warn: oklch(0.77 0.16 75);
  --color-tpt13-warn-ink: #955f00;
  --color-tpt13-warn-ink: oklch(0.52 0.12 70);
  --color-tpt13-over: #de3b3b;
  --color-tpt13-over: oklch(0.6 0.2 25);
  --color-tpt13-over-ink: #b3262a;
  --color-tpt13-over-ink: oklch(0.52 0.19 25);
  --font-tpt13-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-tpt13-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-tpt13-sweep: tpt13-sweep 1s cubic-bezier(0.3, 0, 0.2, 1) both;

  @keyframes tpt13-sweep {
    from {
      scale: 0 1;
    }
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities. */

.tpt-13 {
  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=Instrument+Sans:wght@400..700&family=JetBrains+Mono:wght@400;500&display=swap">

What changed in the port

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

  • transform:scaleX(var(--fill)) became the individual scale property as an arbitrary utility; the keyframe only declares from, so each bar sweeps to its own resting value.
  • animation-timeline and animation-range have no named utilities yet, so they ship as arbitrary properties beside the animate-tpt13-sweep token.
  • UI upgrade from the CSS original: bars now measure a stated usage profile against each plan instead of each plan against itself, with ok / near-limit / over-limit colours and status chips (&ldquo;Over limits&rdquo;, &ldquo;Fits your usage&rdquo;). The original painted the unlimited Max plan amber, which read as a warning.
  • UI upgrade: every bar is a role="meter" with aria-valuetext, and the warn/over text uses darker -ink tokens for AA contrast.
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 Cards with Usage Meters & Progress Bars
Source: https://codefronts.com/components/tailwind-css-pricing-tables/tailwind-pricing-cards-usage-meters-progress-bars/

Show, don't tell, which plan fits: each card measures your current usage against its limits, bars sweep in as the section scrolls into view, and they turn amber near a limit and red past it. The sweep is a v4 animation token plus two arbitrary properties — [animation-timeline:view()] and [animation-range:entry_0%_entry_60%] — and each bar's fill is a single [--tpt13-fill:.42].
## HTML
```html
<section class="tpt-13 w-full min-h-svh grid place-items-center bg-tpt13-bg px-5 py-16 font-tpt13-sans text-tpt13-ink antialiased" aria-label="Pricing with usage meters">
  <div class="grid w-full max-w-5xl justify-items-center gap-10">
    <header class="grid justify-items-center gap-3 text-center">
      <h2 class="text-[clamp(26px,3.8vw,40px)] font-bold tracking-[-0.03em] text-balance">See exactly what fits</h2>
      <p class="rounded-full bg-white px-4 py-2 text-sm text-tpt13-body ring-1 ring-tpt13-line">Your usage: <strong class="font-semibold text-tpt13-ink">42 projects · 180 GB · 8 seats</strong></p>
    </header>
    <div class="grid w-full gap-5 md:grid-cols-3">
      <article class="flex flex-col gap-4 rounded-[20px] border border-tpt13-line bg-white p-7">
        <div class="flex items-baseline justify-between"><h3 class="text-[13px] font-semibold tracking-[0.08em] text-tpt13-mut uppercase">Free</h3><span class="rounded-full bg-tpt13-over/10 px-2.5 py-0.5 text-[11px] font-semibold text-tpt13-over-ink">Over limits</span></div>
        <p class="text-[42px] leading-none font-bold tracking-[-0.035em]">$0</p>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Projects</span><b class="font-semibold text-tpt13-over-ink tabular-nums">42 of 3</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Projects" aria-valuemin="0" aria-valuemax="3" aria-valuenow="3" aria-valuetext="42 of 3, over limit"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-over [--tpt13-fill:1] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Storage</span><b class="font-semibold text-tpt13-over-ink tabular-nums">180 of 2 GB</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Storage" aria-valuemin="0" aria-valuemax="2" aria-valuenow="2" aria-valuetext="180 of 2 GB, over limit"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-over [--tpt13-fill:1] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Seats</span><b class="font-semibold text-tpt13-over-ink tabular-nums">8 of 1</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Seats" aria-valuemin="0" aria-valuemax="1" aria-valuenow="1" aria-valuetext="8 of 1, over limit"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-over [--tpt13-fill:1] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <a href="#" class="mt-auto grid min-h-11 place-items-center rounded-xl border-[1.5px] border-tpt13-line text-sm font-semibold text-tpt13-ink no-underline transition-colors hover:border-tpt13-acc focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-tpt13-acc">Start free</a>
      </article>
      <article class="relative flex flex-col gap-4 rounded-[20px] bg-white p-7 shadow-[0_18px_40px_-26px_var(--color-tpt13-acc)] ring-2 ring-tpt13-acc">
        <div class="flex items-baseline justify-between"><h3 class="text-[13px] font-semibold tracking-[0.08em] text-tpt13-acc-ink uppercase">Pro</h3><span class="rounded-full bg-tpt13-acc px-2.5 py-0.5 text-[11px] font-semibold text-white">Fits your usage</span></div>
        <p class="text-[42px] leading-none font-bold tracking-[-0.035em]">$24<small class="text-[15px] font-medium tracking-normal text-tpt13-mut">/mo</small></p>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Projects</span><b class="font-semibold text-tpt13-ink tabular-nums">42 of 100</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Projects" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42" aria-valuetext="42 of 100"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-ok [--tpt13-fill:.42] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Storage</span><b class="font-semibold text-tpt13-ink tabular-nums">180 of 250 GB</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Storage" aria-valuemin="0" aria-valuemax="250" aria-valuenow="180" aria-valuetext="180 of 250 GB"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-ok [--tpt13-fill:.72] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Seats</span><b class="font-semibold text-tpt13-warn-ink tabular-nums">8 of 10</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Seats" aria-valuemin="0" aria-valuemax="10" aria-valuenow="8" aria-valuetext="8 of 10, near limit"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-warn [--tpt13-fill:.8] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <a href="#" class="mt-auto grid min-h-11 place-items-center rounded-xl bg-tpt13-acc text-sm font-semibold text-white no-underline transition-colors hover:bg-tpt13-acc-ink focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-tpt13-acc">Go Pro</a>
      </article>
      <article class="flex flex-col gap-4 rounded-[20px] border border-tpt13-line bg-white p-7">
        <div class="flex items-baseline justify-between"><h3 class="text-[13px] font-semibold tracking-[0.08em] text-tpt13-mut uppercase">Max</h3><span class="rounded-full bg-tpt13-track px-2.5 py-0.5 text-[11px] font-semibold text-tpt13-mut">Room to grow</span></div>
        <p class="text-[42px] leading-none font-bold tracking-[-0.035em]">$59<small class="text-[15px] font-medium tracking-normal text-tpt13-mut">/mo</small></p>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Projects</span><b class="font-semibold text-tpt13-ink tabular-nums">42 of unlimited</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Projects" aria-valuemin="0" aria-valuemax="1000" aria-valuenow="42" aria-valuetext="42, unlimited plan"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-ok [--tpt13-fill:.04] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Storage</span><b class="font-semibold text-tpt13-ink tabular-nums">180 GB of 2 TB</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Storage" aria-valuemin="0" aria-valuemax="2000" aria-valuenow="180" aria-valuetext="180 GB of 2 TB"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-ok [--tpt13-fill:.09] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <div class="grid gap-1.5"><div class="flex justify-between text-[13px] font-medium text-tpt13-mut"><span>Seats</span><b class="font-semibold text-tpt13-ink tabular-nums">8 of unlimited</b></div><span class="block h-2 overflow-hidden rounded-full bg-tpt13-track" role="meter" aria-label="Seats" aria-valuemin="0" aria-valuemax="200" aria-valuenow="8" aria-valuetext="8, unlimited plan"><span class="block h-full origin-left animate-tpt13-sweep rounded-full bg-tpt13-ok [--tpt13-fill:.04] [animation-range:entry_0%_entry_60%] [animation-timeline:view()] [scale:var(--tpt13-fill)_1] motion-reduce:animate-none"></span></span></div>
        <a href="#" class="mt-auto grid min-h-11 place-items-center rounded-xl border-[1.5px] border-tpt13-line text-sm font-semibold text-tpt13-ink no-underline transition-colors hover:border-tpt13-acc focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-tpt13-acc">Go Max</a>
      </article>
    </div>
    <p aria-hidden="true" class="rounded-full border border-tpt13-line bg-white px-3.5 py-2 font-tpt13-mono text-[11.5px] text-tpt13-mut">[animation-timeline:view()] · [scale:var(--tpt13-fill)_1] · role="meter"</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tpt13-bg: #f3f6fa;
  --color-tpt13-bg: oklch(0.97 0.007 245);
  --color-tpt13-track: #e6ebf2;
  --color-tpt13-track: oklch(0.94 0.01 245);
  --color-tpt13-ink: #141c24;
  --color-tpt13-ink: oklch(0.22 0.02 245);
  --color-tpt13-body: #44515f;
  --color-tpt13-body: oklch(0.43 0.03 245);
  --color-tpt13-mut: #586779;
  --color-tpt13-mut: oklch(0.5 0.03 245);
  --color-tpt13-line: #dce4ec;
  --color-tpt13-line: oklch(0.91 0.012 245);
  --color-tpt13-acc: #1780cc;
  --color-tpt13-acc: oklch(0.58 0.15 245);
  --color-tpt13-acc-ink: #0e619e;
  --color-tpt13-acc-ink: oklch(0.49 0.13 248);
  --color-tpt13-ok: #2b95d6;
  --color-tpt13-ok: oklch(0.64 0.14 240);
  --color-tpt13-warn: #eba417;
  --color-tpt13-warn: oklch(0.77 0.16 75);
  --color-tpt13-warn-ink: #955f00;
  --color-tpt13-warn-ink: oklch(0.52 0.12 70);
  --color-tpt13-over: #de3b3b;
  --color-tpt13-over: oklch(0.6 0.2 25);
  --color-tpt13-over-ink: #b3262a;
  --color-tpt13-over-ink: oklch(0.52 0.19 25);
  --font-tpt13-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-tpt13-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-tpt13-sweep: tpt13-sweep 1s cubic-bezier(0.3, 0, 0.2, 1) both;

  @keyframes tpt13-sweep {
    from {
      scale: 0 1;
    }
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities. */

.tpt-13 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

The bar is one span. Its resting style is its final state; the animation only supplies the start:

@keyframes tpt13-sweep { from { scale: 0 1; } }

<span class="origin-left [scale:var(--tpt13-fill)_1] [--tpt13-fill:.72]
  animate-tpt13-sweep [animation-timeline:view()]
  [animation-range:entry_0%_entry_60%]">

Without scroll timelines the animation simply runs once on load — the information is always correct.

A story, not decoration. The original filled bars to each plan's limit, which says nothing about the buyer. Here a fixed usage profile (42 projects, 180 GB, 8 seats) is measured against each plan: Free overflows in red, Pro sits comfortably with one amber warning, Max barely registers. The recommendation writes itself.

Make it yours

  • Change the usage profile: edit each bar's [--tpt13-fill:…], its label and aria-valuenow.
  • Thresholds: swap bg-tpt13-ok / -warn / -over on each fill.
  • Entrance timing: the animation-range values.
  • Wire to a real account by writing the variables from your usage API.

Gotchas — read before shipping

  • Animate scale, never width — width re-lays out the row every frame.
  • scale stretches rounded ends; keep the radius on the track and clip with overflow-hidden.
  • Always print the numbers — a bar alone is invisible to screen readers and colour-blind users.

Browser support

ChromeSafariFirefoxEdge
115+26+128+ (no timeline)115+

Scroll-driven animations: Chrome 115, Safari 26. Elsewhere the sweep runs once on load; bars always rest at their true value.

Techniques used in this demo

Plain CSSno Tailwind surface

scroll driven animationstw ↗@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →