21 Tailwind CSS Pricing Sections
13 / 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 Editorial Two Column Pricing List

A print-price-list layout: value-prop copy on the left, two compact tier rows stacked on the right, set in Playfair over cream. The port's quiet win is the hover treatment — the recommended row's permanent 4px offset shadow and the other row's hover shadow are now the same utility, declared once as a resting state and once behind hover:.

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-13 w-full min-h-svh bg-tps13-paper font-tps13-sans text-tps13-ink px-[clamp(20px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Pricing">
  <div class="grid grid-cols-1 md:grid-cols-[1.1fr_1fr] items-start gap-8 md:gap-14 max-w-[1040px] mx-auto">
    <div class="pt-1.5">
      <span class="block mb-3.5 font-tps13-mono text-xs tracking-[0.1em] text-tps13-muted">&mdash; Pricing</span>
      <h2 class="m-0 mb-4.5 font-tps13-serif text-[clamp(28px,4.4vw,44px)] font-bold leading-[1.1] tracking-[-0.015em]">Two plans. <em class="italic text-tps13-muted">Pick one,</em> change later.</h2>
      <p class="m-0 mb-3 max-w-[380px] text-[15px]/[1.65] text-tps13-body">We don&rsquo;t play games with feature gating, seat limits, or upsell pop-ups. Pick a plan, get the whole product, and move on with your work.</p>
      <p class="m-0 mb-3 max-w-[380px] pt-3 border-t border-tps13-line text-[13px]/[1.65] text-tps13-muted">All plans include unlimited projects, every integration, and email support. Cancel any time, money back inside 30 days.</p>
      <a href="#compare" class="inline-block mt-3 text-[13px] font-semibold text-tps13-ink underline underline-offset-4 decoration-[1.5px] transition-colors duration-[180ms] hover:text-tps13-muted focus-visible:outline-2 focus-visible:outline-tps13-ink focus-visible:outline-offset-[3px] motion-reduce:transition-none">See the full feature list &rarr;</a>
    </div>
    <div class="flex flex-col gap-3.5">
      <article class="px-[22px] pt-[22px] pb-[18px] rounded-[6px] bg-white border border-tps13-line transition-[border-color,box-shadow] duration-[180ms] hover:border-tps13-ink hover:shadow-[4px_4px_0_0_--theme(--color-tps13-ink)] motion-reduce:transition-none">
        <header class="flex items-baseline justify-between gap-3 pb-3 mb-3 border-b border-dashed border-tps13-line">
          <h3 class="flex items-center gap-2.5 m-0 font-tps13-serif text-[22px] font-bold">Solo</h3>
          <span class="text-[22px] font-extrabold tracking-[-0.02em]">$15<em class="not-italic ml-1 text-[11px] font-medium tracking-normal text-tps13-muted">/ month</em></span>
        </header>
        <p class="m-0 mb-2.5 text-[13.5px]/[1.5] text-tps13-body">For freelancers and indie builders shipping client work.</p>
        <ul class="list-none p-0 m-0 mb-4 text-[13px]/[1.85] text-tps13-body">
          <li class="before:content-['\00B7'] before:inline-block before:w-[18px] before:text-[18px] before:font-extrabold before:leading-[0.5] before:align-middle before:text-tps13-ink">Single workspace</li>
          <li class="before:content-['\00B7'] before:inline-block before:w-[18px] before:text-[18px] before:font-extrabold before:leading-[0.5] before:align-middle before:text-tps13-ink">10 GB storage</li>
          <li class="before:content-['\00B7'] before:inline-block before:w-[18px] before:text-[18px] before:font-extrabold before:leading-[0.5] before:align-middle before:text-tps13-ink">Email support</li>
        </ul>
        <a href="#solo" class="inline-block px-4 py-2.25 rounded-[4px] bg-transparent text-tps13-ink border-[1.5px] border-tps13-ink text-[13px] font-semibold no-underline transition-[background-color,color] duration-[180ms] hover:bg-tps13-ink hover:text-tps13-paper focus-visible:outline-2 focus-visible:outline-tps13-ink focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Solo &rarr;</a>
      </article>
      <article class="px-[22px] pt-[22px] pb-[18px] rounded-[6px] bg-white border border-tps13-ink shadow-[4px_4px_0_0_--theme(--color-tps13-ink)]">
        <header class="flex items-baseline justify-between gap-3 pb-3 mb-3 border-b border-dashed border-tps13-line">
          <h3 class="flex items-center gap-2.5 m-0 font-tps13-serif text-[22px] font-bold">Studio <span class="px-2 py-0.75 rounded-[2px] bg-tps13-ink text-tps13-paper font-tps13-mono text-[9.5px] font-bold uppercase tracking-[0.12em]">Recommended</span></h3>
          <span class="text-[22px] font-extrabold tracking-[-0.02em]">$48<em class="not-italic ml-1 text-[11px] font-medium tracking-normal text-tps13-muted">/ month</em></span>
        </header>
        <p class="m-0 mb-2.5 text-[13.5px]/[1.5] text-tps13-body">For small teams who run multiple client engagements.</p>
        <ul class="list-none p-0 m-0 mb-4 text-[13px]/[1.85] text-tps13-body">
          <li class="before:content-['\00B7'] before:inline-block before:w-[18px] before:text-[18px] before:font-extrabold before:leading-[0.5] before:align-middle before:text-tps13-ink">Unlimited workspaces</li>
          <li class="before:content-['\00B7'] before:inline-block before:w-[18px] before:text-[18px] before:font-extrabold before:leading-[0.5] before:align-middle before:text-tps13-ink">250 GB storage</li>
          <li class="before:content-['\00B7'] before:inline-block before:w-[18px] before:text-[18px] before:font-extrabold before:leading-[0.5] before:align-middle before:text-tps13-ink">Priority support &amp; onboarding</li>
          <li class="before:content-['\00B7'] before:inline-block before:w-[18px] before:text-[18px] before:font-extrabold before:leading-[0.5] before:align-middle before:text-tps13-ink">Client billing &amp; white-label</li>
        </ul>
        <a href="#studio" class="inline-block px-4 py-2.25 rounded-[4px] bg-tps13-ink text-tps13-paper border-[1.5px] border-tps13-ink text-[13px] font-semibold no-underline transition-[background-color,color] duration-[180ms] hover:bg-tps13-paper hover:text-tps13-ink focus-visible:outline-2 focus-visible:outline-tps13-ink focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Studio &rarr;</a>
      </article>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tps13-paper: #f5f1ea;
  --color-tps13-paper: oklch(0.95 0.015 85);
  --color-tps13-ink: #1c1c1e;
  --color-tps13-ink: oklch(0.22 0.003 285);
  --color-tps13-body: #3d3d40;
  --color-tps13-body: oklch(0.36 0.004 285);
  --color-tps13-muted: #6b6b6e;
  --color-tps13-muted: oklch(0.52 0.004 285);
  --color-tps13-line: #d8d2c5;
  --color-tps13-line: oklch(0.86 0.02 85);
  --font-tps13-serif: 'Playfair Display', Georgia, serif;
  --font-tps13-mono: 'JetBrains Mono', monospace;
  --font-tps13-sans: 'Public Sans', 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-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-tps13-paper: #f5f1ea;
  --color-tps13-paper: oklch(0.95 0.015 85);
  --color-tps13-ink: #1c1c1e;
  --color-tps13-ink: oklch(0.22 0.003 285);
  --color-tps13-body: #3d3d40;
  --color-tps13-body: oklch(0.36 0.004 285);
  --color-tps13-muted: #6b6b6e;
  --color-tps13-muted: oklch(0.52 0.004 285);
  --color-tps13-line: #d8d2c5;
  --color-tps13-line: oklch(0.86 0.02 85);
  --font-tps13-serif: 'Playfair Display', Georgia, serif;
  --font-tps13-mono: 'JetBrains Mono', monospace;
  --font-tps13-sans: 'Public Sans', 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-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=Playfair+Display:ital,wght@0,700;1,700&family=JetBrains+Mono:wght@400;700&family=Public+Sans:wght@400;500;600;800&display=swap">

What changed in the port

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

  • The featured row and the hover state now state the same two values — border-tps13-ink and shadow-[4px_4px_0_0_…] — one unconditionally, one behind hover:. In CSS they are two rules 20 lines apart, and keeping the offsets equal is manual.
  • .ps-13__fine { font-size: 13px !important; color: #6b6b6e !important } is gone. The fine print carries its own two utilities and there is no .ps-13__copy p rule to override.
  • Three font tokens (serif / mono / sans) replace three hard-coded font-family declarations scattered across five rules; the mixture is now visible on the elements that use it.
  • The &middot; bullet's vertical-alignment fix — line-height: 0.5 plus vertical-align: middle on an 18px glyph — ports directly as before:leading-[0.5] before:align-middle.
  • The 820px single-column media query disappears: grid-cols-1 md:grid-cols-[1.1fr_1fr] with gap-8 md:gap-14 states the stacked layout as the base case.
  • The reduced-motion block had a transform: none rule for a transform this design never applies — a leftover. The port drops it and keeps only motion-reduce:transition-none where there is an actual transition.
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 Editorial Two Column Pricing List
Source: https://codefronts.com/layouts/tailwind-css-pricing-sections/tailwind-editorial-two-column-pricing-list/

A print-price-list layout: value-prop copy on the left, two compact tier rows stacked on the right, set in Playfair over cream. The port's quiet win is the hover treatment &mdash; the recommended row's permanent 4px offset shadow and the other row's hover shadow are now the same utility, declared once as a resting state and once behind hover:.
## HTML
```html
<section class="tps-13 w-full min-h-svh bg-tps13-paper font-tps13-sans text-tps13-ink px-[clamp(20px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Pricing">
  <div class="grid grid-cols-1 md:grid-cols-[1.1fr_1fr] items-start gap-8 md:gap-14 max-w-[1040px] mx-auto">
    <div class="pt-1.5">
      <span class="block mb-3.5 font-tps13-mono text-xs tracking-[0.1em] text-tps13-muted">&mdash; Pricing</span>
      <h2 class="m-0 mb-4.5 font-tps13-serif text-[clamp(28px,4.4vw,44px)] font-bold leading-[1.1] tracking-[-0.015em]">Two plans. <em class="italic text-tps13-muted">Pick one,</em> change later.</h2>
      <p class="m-0 mb-3 max-w-[380px] text-[15px]/[1.65] text-tps13-body">We don&rsquo;t play games with feature gating, seat limits, or upsell pop-ups. Pick a plan, get the whole product, and move on with your work.</p>
      <p class="m-0 mb-3 max-w-[380px] pt-3 border-t border-tps13-line text-[13px]/[1.65] text-tps13-muted">All plans include unlimited projects, every integration, and email support. Cancel any time, money back inside 30 days.</p>
      <a href="#compare" class="inline-block mt-3 text-[13px] font-semibold text-tps13-ink underline underline-offset-4 decoration-[1.5px] transition-colors duration-[180ms] hover:text-tps13-muted focus-visible:outline-2 focus-visible:outline-tps13-ink focus-visible:outline-offset-[3px] motion-reduce:transition-none">See the full feature list &rarr;</a>
    </div>
    <div class="flex flex-col gap-3.5">
      <article class="px-[22px] pt-[22px] pb-[18px] rounded-[6px] bg-white border border-tps13-line transition-[border-color,box-shadow] duration-[180ms] hover:border-tps13-ink hover:shadow-[4px_4px_0_0_--theme(--color-tps13-ink)] motion-reduce:transition-none">
        <header class="flex items-baseline justify-between gap-3 pb-3 mb-3 border-b border-dashed border-tps13-line">
          <h3 class="flex items-center gap-2.5 m-0 font-tps13-serif text-[22px] font-bold">Solo</h3>
          <span class="text-[22px] font-extrabold tracking-[-0.02em]">$15<em class="not-italic ml-1 text-[11px] font-medium tracking-normal text-tps13-muted">/ month</em></span>
        </header>
        <p class="m-0 mb-2.5 text-[13.5px]/[1.5] text-tps13-body">For freelancers and indie builders shipping client work.</p>
        <ul class="list-none p-0 m-0 mb-4 text-[13px]/[1.85] text-tps13-body">
          <li class="before:content-['\00B7'] before:inline-block before:w-[18px] before:text-[18px] before:font-extrabold before:leading-[0.5] before:align-middle before:text-tps13-ink">Single workspace</li>
          <li class="before:content-['\00B7'] before:inline-block before:w-[18px] before:text-[18px] before:font-extrabold before:leading-[0.5] before:align-middle before:text-tps13-ink">10 GB storage</li>
          <li class="before:content-['\00B7'] before:inline-block before:w-[18px] before:text-[18px] before:font-extrabold before:leading-[0.5] before:align-middle before:text-tps13-ink">Email support</li>
        </ul>
        <a href="#solo" class="inline-block px-4 py-2.25 rounded-[4px] bg-transparent text-tps13-ink border-[1.5px] border-tps13-ink text-[13px] font-semibold no-underline transition-[background-color,color] duration-[180ms] hover:bg-tps13-ink hover:text-tps13-paper focus-visible:outline-2 focus-visible:outline-tps13-ink focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Solo &rarr;</a>
      </article>
      <article class="px-[22px] pt-[22px] pb-[18px] rounded-[6px] bg-white border border-tps13-ink shadow-[4px_4px_0_0_--theme(--color-tps13-ink)]">
        <header class="flex items-baseline justify-between gap-3 pb-3 mb-3 border-b border-dashed border-tps13-line">
          <h3 class="flex items-center gap-2.5 m-0 font-tps13-serif text-[22px] font-bold">Studio <span class="px-2 py-0.75 rounded-[2px] bg-tps13-ink text-tps13-paper font-tps13-mono text-[9.5px] font-bold uppercase tracking-[0.12em]">Recommended</span></h3>
          <span class="text-[22px] font-extrabold tracking-[-0.02em]">$48<em class="not-italic ml-1 text-[11px] font-medium tracking-normal text-tps13-muted">/ month</em></span>
        </header>
        <p class="m-0 mb-2.5 text-[13.5px]/[1.5] text-tps13-body">For small teams who run multiple client engagements.</p>
        <ul class="list-none p-0 m-0 mb-4 text-[13px]/[1.85] text-tps13-body">
          <li class="before:content-['\00B7'] before:inline-block before:w-[18px] before:text-[18px] before:font-extrabold before:leading-[0.5] before:align-middle before:text-tps13-ink">Unlimited workspaces</li>
          <li class="before:content-['\00B7'] before:inline-block before:w-[18px] before:text-[18px] before:font-extrabold before:leading-[0.5] before:align-middle before:text-tps13-ink">250 GB storage</li>
          <li class="before:content-['\00B7'] before:inline-block before:w-[18px] before:text-[18px] before:font-extrabold before:leading-[0.5] before:align-middle before:text-tps13-ink">Priority support &amp; onboarding</li>
          <li class="before:content-['\00B7'] before:inline-block before:w-[18px] before:text-[18px] before:font-extrabold before:leading-[0.5] before:align-middle before:text-tps13-ink">Client billing &amp; white-label</li>
        </ul>
        <a href="#studio" class="inline-block px-4 py-2.25 rounded-[4px] bg-tps13-ink text-tps13-paper border-[1.5px] border-tps13-ink text-[13px] font-semibold no-underline transition-[background-color,color] duration-[180ms] hover:bg-tps13-paper hover:text-tps13-ink focus-visible:outline-2 focus-visible:outline-tps13-ink focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Studio &rarr;</a>
      </article>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tps13-paper: #f5f1ea;
  --color-tps13-paper: oklch(0.95 0.015 85);
  --color-tps13-ink: #1c1c1e;
  --color-tps13-ink: oklch(0.22 0.003 285);
  --color-tps13-body: #3d3d40;
  --color-tps13-body: oklch(0.36 0.004 285);
  --color-tps13-muted: #6b6b6e;
  --color-tps13-muted: oklch(0.52 0.004 285);
  --color-tps13-line: #d8d2c5;
  --color-tps13-line: oklch(0.86 0.02 85);
  --font-tps13-serif: 'Playfair Display', Georgia, serif;
  --font-tps13-mono: 'JetBrains Mono', monospace;
  --font-tps13-sans: 'Public Sans', 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-13 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

The recommended row is not a variant, it is the hover state made permanent. Both rows carry the same border and shadow vocabulary:

<!-- plain -->    hover:border-tps13-ink hover:shadow-[4px_4px_0_0_…]
<!-- featured --> border-tps13-ink shadow-[4px_4px_0_0_…]

Same two values, different trigger. In the CSS version those live in two rules (:hover and .ps-13__rec) that have to be kept numerically in sync by hand.

Three typefaces, three tokens. Playfair for the display headings, JetBrains Mono for the eyebrow and the RECOMMENDED tag, a sans for body copy. Declared as --font-tps13-* in @theme, they become font-tps13-serif and friends — and the mixture stays legible in the markup instead of being implied by which class an element happens to carry.

The !important disappears. .ps-13__fine in the CSS has to shout over .ps-13__copy p with two !important flags. Here the fine-print paragraph simply carries text-[13px] text-tps13-muted and there is no rule to fight.

Cream and charcoal at full strength. #1c1c1e on #f5f1ea is about 15:1; the muted grey is still past 5:1. Nothing in this design needs alpha text, which is why it reads as print rather than as a web page.

Make it yours

  • Column ratio: md:grid-cols-[1.1fr_1fr]. Longer copy wants 1.3fr; a third tier wants the ratio flipped.
  • Shadow offset: the 4px pair. Keep it identical on the hover and the resting declarations or the featured row looks like a different component.
  • Display face: --font-tps13-serif. Any high-contrast serif works — the design depends on the contrast with the mono eyebrow, not on Playfair specifically.
  • Paper and ink: --color-tps13-paper, --color-tps13-ink, --color-tps13-line. The line colour is doing more work than it looks — it draws every divider and border.
  • Radius: rounded-[6px] on the rows, rounded-[4px] on the CTAs, rounded-[2px] on the tag. The descending scale is deliberate; flatten it and the block loses its hierarchy.

Gotchas — read before shipping

  • The two rows must state the same shadow value. If the hover offset and the featured offset drift apart, the layout jumps when you hover the featured row.
  • before:leading-[0.5] before:align-middle is not decoration — an 18px middot on a 13px line box sits far below the baseline without it.
  • Keep items-start on the grid. Without it the copy column stretches to the height of the tier stack and the eyebrow floats away from the heading.
  • The RECOMMENDED tag is bg-tps13-ink text-tps13-paper — cream on charcoal. Inverting it to charcoal-on-cream loses the tag entirely against the white row.
  • italic on the <em> in the heading is load-bearing typography, not emphasis markup: it is what makes the two-tone display line work.
  • No transform on hover here. The shadow appearing without the card moving is the whole print-block effect; adding a lift makes it a generic web card.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Nothing here is recent. text-underline-offset and text-decoration-thickness are Baseline (Chrome 87, Safari 12.1, Firefox 70); everything else is a border, a shadow and a grid.

Techniques used in this demo

Utilitiesfirst-class utility or variant

box-shadowtw ↗transitionstw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →