21 Tailwind CSS Pricing Tables
06 / 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 "Most Popular" Pricing Card with Animated Border Beam

A comet of light orbits the “Most popular” card — the border-beam effect every SaaS landing page wants — drawn with the two-background padding-box / border-box trick and spun by animating one registered @property angle. The beam is a single arbitrary [background:…] utility; a blurred before: copy supplies the glow. No mask, no SVG.

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-06 w-full min-h-svh grid place-items-center bg-tpt06-bg bg-[radial-gradient(60%_50%_at_50%_45%,var(--color-tpt06-glow),transparent)] px-5 py-16 font-tpt06-sans text-tpt06-ink antialiased" aria-label="Pricing with highlighted most popular plan">
  <div class="isolate grid w-full max-w-5xl justify-items-center gap-10">
    <div class="grid w-full gap-5 md:grid-cols-3 md:items-center">
      <article class="flex flex-col gap-4 rounded-[20px] border border-tpt06-line bg-tpt06-card p-7">
        <h3 class="text-[13px] font-semibold tracking-[0.08em] text-tpt06-mut uppercase">Indie</h3>
        <p class="text-[44px] leading-none font-bold tracking-[-0.035em]">$10<small class="text-[15px] font-medium tracking-normal text-tpt06-mut">/mo</small></p>
        <ul class="grid flex-1 content-start gap-2.5 text-sm text-tpt06-body *:flex *:gap-2.5 *:before:font-bold *:before:text-tpt06-beam *:before:content-['✓']"><li>1 product</li><li>Standard checkout</li><li>2% transaction fee</li></ul>
        <a href="#" class="grid min-h-11 place-items-center rounded-xl border border-tpt06-line text-sm font-semibold text-tpt06-ink no-underline transition-colors hover:border-tpt06-beam focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-tpt06-beam">Go Indie</a>
      </article>
      <article class="relative flex animate-tpt06-spin flex-col gap-4 rounded-[20px] border-2 border-transparent px-7 py-9 [background:linear-gradient(var(--color-tpt06-card-hi),var(--color-tpt06-card-hi))_padding-box,conic-gradient(from_var(--tpt06-a),var(--color-tpt06-line)_0deg_300deg,var(--color-tpt06-beam)_340deg,white_350deg,var(--color-tpt06-beam)_355deg,var(--color-tpt06-line)_360deg)_border-box] before:pointer-events-none before:absolute before:-inset-[2px] before:-z-10 before:rounded-[inherit] before:opacity-50 before:blur-xl before:content-[''] before:[background:conic-gradient(from_var(--tpt06-a),transparent_0deg_300deg,var(--color-tpt06-beam)_345deg,transparent_360deg)] motion-reduce:animate-none">
        <span class="w-max rounded-full border border-tpt06-beam/40 bg-tpt06-beam/12 px-3 py-1 text-[10.5px] font-bold tracking-[0.1em] text-tpt06-beam uppercase">Most popular</span>
        <h3 class="text-[13px] font-semibold tracking-[0.08em] text-tpt06-mut uppercase">Business</h3>
        <p class="text-[48px] leading-none font-bold tracking-[-0.035em]">$29<small class="text-[15px] font-medium tracking-normal text-tpt06-mut">/mo</small></p>
        <ul class="grid flex-1 content-start gap-2.5 text-sm text-tpt06-body *:flex *:gap-2.5 *:before:font-bold *:before:text-tpt06-beam *:before:content-['✓']"><li>Unlimited products</li><li>Custom checkout</li><li>0.5% transaction fee</li><li>Subscriptions &amp; trials</li></ul>
        <a href="#" class="grid min-h-11 place-items-center rounded-xl bg-tpt06-beam text-sm font-bold text-tpt06-on-beam no-underline transition hover:brightness-110 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-tpt06-beam">Go Business</a>
      </article>
      <article class="flex flex-col gap-4 rounded-[20px] border border-tpt06-line bg-tpt06-card p-7">
        <h3 class="text-[13px] font-semibold tracking-[0.08em] text-tpt06-mut uppercase">Platform</h3>
        <p class="text-[44px] leading-none font-bold tracking-[-0.035em]">$85<small class="text-[15px] font-medium tracking-normal text-tpt06-mut">/mo</small></p>
        <ul class="grid flex-1 content-start gap-2.5 text-sm text-tpt06-body *:flex *:gap-2.5 *:before:font-bold *:before:text-tpt06-beam *:before:content-['✓']"><li>Everything in Business</li><li>Marketplace payouts</li><li>0% transaction fee</li></ul>
        <a href="#" class="grid min-h-11 place-items-center rounded-xl border border-tpt06-line text-sm font-semibold text-tpt06-ink no-underline transition-colors hover:border-tpt06-beam focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-tpt06-beam">Go Platform</a>
      </article>
    </div>
    <p aria-hidden="true" class="rounded-full border border-white/12 px-3.5 py-2 font-tpt06-mono text-[11.5px] text-tpt06-mut">@property &lt;angle&gt; · padding-box / border-box · animate-tpt06-spin</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tpt06-bg: #0b0d14;
  --color-tpt06-bg: oklch(0.16 0.015 270);
  --color-tpt06-glow: #2a230f80;
  --color-tpt06-glow: oklch(0.27 0.04 85 / 0.5);
  --color-tpt06-card: #151824;
  --color-tpt06-card: oklch(0.21 0.022 270);
  --color-tpt06-card-hi: #191d2b;
  --color-tpt06-card-hi: oklch(0.235 0.025 270);
  --color-tpt06-line: #2a2f42;
  --color-tpt06-line: oklch(0.31 0.03 270);
  --color-tpt06-ink: #edf0f7;
  --color-tpt06-ink: oklch(0.95 0.008 270);
  --color-tpt06-body: #c2c7d8;
  --color-tpt06-body: oklch(0.83 0.02 270);
  --color-tpt06-mut: #9aa1b8;
  --color-tpt06-mut: oklch(0.72 0.025 270);
  --color-tpt06-beam: #f2c14e;
  --color-tpt06-beam: oklch(0.83 0.15 85);
  --color-tpt06-on-beam: #1d1603;
  --color-tpt06-on-beam: oklch(0.2 0.03 85);
  --font-tpt06-sans: 'Geist', system-ui, sans-serif;
  --font-tpt06-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-tpt06-spin: tpt06-spin 4s linear infinite;

  @keyframes tpt06-spin {
    to {
      --tpt06-a: 570deg;
    }
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities. */

.tpt-06 {
  width: 100%;
  min-height: 100svh;
}
/* Registered so the angle interpolates; inherits:true lets the before: glow read the same value.
   Initial 210deg is also the frozen reduced-motion pose. */

@property --tpt06-a {
  syntax: '<angle>';
  initial-value: 210deg;
  inherits: true;
}

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-tpt06-bg: #0b0d14;
  --color-tpt06-bg: oklch(0.16 0.015 270);
  --color-tpt06-glow: #2a230f80;
  --color-tpt06-glow: oklch(0.27 0.04 85 / 0.5);
  --color-tpt06-card: #151824;
  --color-tpt06-card: oklch(0.21 0.022 270);
  --color-tpt06-card-hi: #191d2b;
  --color-tpt06-card-hi: oklch(0.235 0.025 270);
  --color-tpt06-line: #2a2f42;
  --color-tpt06-line: oklch(0.31 0.03 270);
  --color-tpt06-ink: #edf0f7;
  --color-tpt06-ink: oklch(0.95 0.008 270);
  --color-tpt06-body: #c2c7d8;
  --color-tpt06-body: oklch(0.83 0.02 270);
  --color-tpt06-mut: #9aa1b8;
  --color-tpt06-mut: oklch(0.72 0.025 270);
  --color-tpt06-beam: #f2c14e;
  --color-tpt06-beam: oklch(0.83 0.15 85);
  --color-tpt06-on-beam: #1d1603;
  --color-tpt06-on-beam: oklch(0.2 0.03 85);
  --font-tpt06-sans: 'Geist', system-ui, sans-serif;
  --font-tpt06-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-tpt06-spin: tpt06-spin 4s linear infinite;

  @keyframes tpt06-spin {
    to {
      --tpt06-a: 570deg;
    }
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities. */

.tpt-06 {
  width: 100%;
  min-height: 100svh;
}
/* Registered so the angle interpolates; inherits:true lets the before: glow read the same value.
   Initial 210deg is also the frozen reduced-motion pose. */

@property --tpt06-a {
  syntax: '<angle>';
  initial-value: 210deg;
  inherits: true;
}
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..800&family=JetBrains+Mono:wght@400;500&display=swap">

What changed in the port

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

  • The masked ::before ring and its -webkit-mask twin became one arbitrary [background:…] utility using the padding-box / border-box trick — no prefixes, no extra layer.
  • @keyframes prc-06-spin moved inside @theme next to its --animate-tpt06-spin token; @property stayed in CSS because an at-rule has no utility spelling.
  • UI upgrade from the CSS original: the resting border is part of the same gradient (line 0 300deg), so the card keeps a crisp edge between comet passes instead of vanishing into the dark stage.
  • UI upgrade: the popular card is taller (py-9) with a larger price, pulling focus by scale as well as light; muted copy rose from #8b92ab (4.2:1 on the card) to 5.6:1.
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 "Most Popular" Pricing Card with Animated Border Beam
Source: https://codefronts.com/components/tailwind-css-pricing-tables/tailwind-most-popular-pricing-card-border-beam/

A comet of light orbits the &ldquo;Most popular&rdquo; card — the border-beam effect every SaaS landing page wants — drawn with the two-background padding-box / border-box trick and spun by animating one registered @property angle. The beam is a single arbitrary [background:…] utility; a blurred before: copy supplies the glow. No mask, no SVG.
## HTML
```html
<section class="tpt-06 w-full min-h-svh grid place-items-center bg-tpt06-bg bg-[radial-gradient(60%_50%_at_50%_45%,var(--color-tpt06-glow),transparent)] px-5 py-16 font-tpt06-sans text-tpt06-ink antialiased" aria-label="Pricing with highlighted most popular plan">
  <div class="isolate grid w-full max-w-5xl justify-items-center gap-10">
    <div class="grid w-full gap-5 md:grid-cols-3 md:items-center">
      <article class="flex flex-col gap-4 rounded-[20px] border border-tpt06-line bg-tpt06-card p-7">
        <h3 class="text-[13px] font-semibold tracking-[0.08em] text-tpt06-mut uppercase">Indie</h3>
        <p class="text-[44px] leading-none font-bold tracking-[-0.035em]">$10<small class="text-[15px] font-medium tracking-normal text-tpt06-mut">/mo</small></p>
        <ul class="grid flex-1 content-start gap-2.5 text-sm text-tpt06-body *:flex *:gap-2.5 *:before:font-bold *:before:text-tpt06-beam *:before:content-['✓']"><li>1 product</li><li>Standard checkout</li><li>2% transaction fee</li></ul>
        <a href="#" class="grid min-h-11 place-items-center rounded-xl border border-tpt06-line text-sm font-semibold text-tpt06-ink no-underline transition-colors hover:border-tpt06-beam focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-tpt06-beam">Go Indie</a>
      </article>
      <article class="relative flex animate-tpt06-spin flex-col gap-4 rounded-[20px] border-2 border-transparent px-7 py-9 [background:linear-gradient(var(--color-tpt06-card-hi),var(--color-tpt06-card-hi))_padding-box,conic-gradient(from_var(--tpt06-a),var(--color-tpt06-line)_0deg_300deg,var(--color-tpt06-beam)_340deg,white_350deg,var(--color-tpt06-beam)_355deg,var(--color-tpt06-line)_360deg)_border-box] before:pointer-events-none before:absolute before:-inset-[2px] before:-z-10 before:rounded-[inherit] before:opacity-50 before:blur-xl before:content-[''] before:[background:conic-gradient(from_var(--tpt06-a),transparent_0deg_300deg,var(--color-tpt06-beam)_345deg,transparent_360deg)] motion-reduce:animate-none">
        <span class="w-max rounded-full border border-tpt06-beam/40 bg-tpt06-beam/12 px-3 py-1 text-[10.5px] font-bold tracking-[0.1em] text-tpt06-beam uppercase">Most popular</span>
        <h3 class="text-[13px] font-semibold tracking-[0.08em] text-tpt06-mut uppercase">Business</h3>
        <p class="text-[48px] leading-none font-bold tracking-[-0.035em]">$29<small class="text-[15px] font-medium tracking-normal text-tpt06-mut">/mo</small></p>
        <ul class="grid flex-1 content-start gap-2.5 text-sm text-tpt06-body *:flex *:gap-2.5 *:before:font-bold *:before:text-tpt06-beam *:before:content-['✓']"><li>Unlimited products</li><li>Custom checkout</li><li>0.5% transaction fee</li><li>Subscriptions &amp; trials</li></ul>
        <a href="#" class="grid min-h-11 place-items-center rounded-xl bg-tpt06-beam text-sm font-bold text-tpt06-on-beam no-underline transition hover:brightness-110 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-tpt06-beam">Go Business</a>
      </article>
      <article class="flex flex-col gap-4 rounded-[20px] border border-tpt06-line bg-tpt06-card p-7">
        <h3 class="text-[13px] font-semibold tracking-[0.08em] text-tpt06-mut uppercase">Platform</h3>
        <p class="text-[44px] leading-none font-bold tracking-[-0.035em]">$85<small class="text-[15px] font-medium tracking-normal text-tpt06-mut">/mo</small></p>
        <ul class="grid flex-1 content-start gap-2.5 text-sm text-tpt06-body *:flex *:gap-2.5 *:before:font-bold *:before:text-tpt06-beam *:before:content-['✓']"><li>Everything in Business</li><li>Marketplace payouts</li><li>0% transaction fee</li></ul>
        <a href="#" class="grid min-h-11 place-items-center rounded-xl border border-tpt06-line text-sm font-semibold text-tpt06-ink no-underline transition-colors hover:border-tpt06-beam focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-tpt06-beam">Go Platform</a>
      </article>
    </div>
    <p aria-hidden="true" class="rounded-full border border-white/12 px-3.5 py-2 font-tpt06-mono text-[11.5px] text-tpt06-mut">@property &lt;angle&gt; · padding-box / border-box · animate-tpt06-spin</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tpt06-bg: #0b0d14;
  --color-tpt06-bg: oklch(0.16 0.015 270);
  --color-tpt06-glow: #2a230f80;
  --color-tpt06-glow: oklch(0.27 0.04 85 / 0.5);
  --color-tpt06-card: #151824;
  --color-tpt06-card: oklch(0.21 0.022 270);
  --color-tpt06-card-hi: #191d2b;
  --color-tpt06-card-hi: oklch(0.235 0.025 270);
  --color-tpt06-line: #2a2f42;
  --color-tpt06-line: oklch(0.31 0.03 270);
  --color-tpt06-ink: #edf0f7;
  --color-tpt06-ink: oklch(0.95 0.008 270);
  --color-tpt06-body: #c2c7d8;
  --color-tpt06-body: oklch(0.83 0.02 270);
  --color-tpt06-mut: #9aa1b8;
  --color-tpt06-mut: oklch(0.72 0.025 270);
  --color-tpt06-beam: #f2c14e;
  --color-tpt06-beam: oklch(0.83 0.15 85);
  --color-tpt06-on-beam: #1d1603;
  --color-tpt06-on-beam: oklch(0.2 0.03 85);
  --font-tpt06-sans: 'Geist', system-ui, sans-serif;
  --font-tpt06-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-tpt06-spin: tpt06-spin 4s linear infinite;

  @keyframes tpt06-spin {
    to {
      --tpt06-a: 570deg;
    }
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities. */

.tpt-06 {
  width: 100%;
  min-height: 100svh;
}
/* Registered so the angle interpolates; inherits:true lets the before: glow read the same value.
   Initial 210deg is also the frozen reduced-motion pose. */

@property --tpt06-a {
  syntax: '<angle>';
  initial-value: 210deg;
  inherits: true;
}
```

How this works

Two backgrounds, one border. A transparent 2px border exposes the border-box layer; the solid padding-box layer covers the rest. The conic gradient is mostly the resting border colour, with a bright 20° comet:

conic-gradient(from var(--tpt06-a),
  line 0 300deg, beam 340deg, white 350deg, beam 355deg, line 360deg)

Why no mask. The CSS original clipped a pseudo-element with mask-composite:exclude, which needs a prefixed twin for Safari. The background-clip trick needs neither and paints on the card itself.

The glow is before:blur-xl before:opacity-50 over a transparent-except-comet gradient, behind the card via before:-z-10 inside an isolate wrapper.

Make it yours

  • Speed: change 4s in --animate-tpt06-spin.
  • Comet length: widen the 300deg → 360deg span in both gradients.
  • Hover-only beam: replace animate-tpt06-spin with hover:animate-tpt06-spin.
  • Thicker beam: border-[3px]; match the glow's before:-inset-[3px].

Gotchas — read before shipping

  • Without @property registration the angle can't interpolate — the beam jumps instead of orbiting.
  • Without isolate on an ancestor, the -z-10 glow slips behind the section background and disappears.
  • Keep rounded-[inherit] on the glow so it follows the card's radius.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

@property is Chrome 85 / Safari 16.4 / Firefox 128 — identical to Tailwind v4's own floor.

Techniques used in this demo

Utilitiesfirst-class utility or variant

conic-gradient()tw ↗prefers-reduced-motiontw ↗

Plain CSSno Tailwind surface

@propertytw ↗@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →