~/css/tailwind-pricing-tables

6 Tailwind Pricing Tables

5 Tailwind1 with JSPublished 2026-10-04Free · no sign-up

Six pricing layouts in Tailwind: three plan cards with a raised favourite, a dark card with a gradient border, plans with a Monthly and Yearly switch, a feature comparison table, plan rows for account settings and plans with an enterprise contact strip.

Filter demos

01. Tailwind Three-Plan Pricing

TailwindPricing

Three pricing cards in a responsive grid, with the middle plan raised using -translate-y-2 and a ring in the brand colour. Feature lists use before:content for ticks, and md:grid-cols-3 keeps phones on a single readable column.

View code

<div class="grid w-full max-w-3xl items-start gap-4 md:grid-cols-3">
  <article class="rounded-2xl border border-slate-200 bg-white p-6 text-slate-600"><h3 class="font-bold text-slate-900">Basic</h3><p class="my-3 text-3xl font-extrabold text-slate-900">$12<span class="text-sm font-medium text-slate-500">/mo</span></p><ul class="mb-6 space-y-2 text-sm [&>li]:before:mr-2 [&>li]:before:font-bold [&>li]:before:text-green-700 [&>li]:before:content-['\2713']"><li>1 store</li><li>50 products</li><li>Email support</li></ul><a href="#" class="block rounded-lg border border-slate-300 py-2.5 text-center text-sm font-bold text-slate-900">Choose Basic</a></article>
  <article class="-translate-y-2 rounded-2xl bg-white p-6 text-slate-600 shadow-xl shadow-indigo-500/20 ring-2 ring-indigo-600"><span class="mb-2 inline-block rounded-full bg-indigo-50 px-2.5 py-0.5 text-xs font-bold text-indigo-700">Most popular</span><h3 class="font-bold text-slate-900">Pro</h3><p class="my-3 text-3xl font-extrabold text-slate-900">$32<span class="text-sm font-medium text-slate-500">/mo</span></p><ul class="mb-6 space-y-2 text-sm [&>li]:before:mr-2 [&>li]:before:font-bold [&>li]:before:text-green-700 [&>li]:before:content-['\2713']"><li>3 stores</li><li>Unlimited products</li><li>Cart recovery</li><li>Chat support</li></ul><a href="#" class="block rounded-lg bg-indigo-600 py-2.5 text-center text-sm font-bold text-white hover:bg-indigo-700">Choose Pro</a></article>
  <article class="rounded-2xl border border-slate-200 bg-white p-6 text-slate-600"><h3 class="font-bold text-slate-900">Business</h3><p class="my-3 text-3xl font-extrabold text-slate-900">$89<span class="text-sm font-medium text-slate-500">/mo</span></p><ul class="mb-6 space-y-2 text-sm [&>li]:before:mr-2 [&>li]:before:font-bold [&>li]:before:text-green-700 [&>li]:before:content-['\2713']"><li>10 stores</li><li>Staff accounts</li><li>Phone support</li></ul><a href="#" class="block rounded-lg border border-slate-300 py-2.5 text-center text-sm font-bold text-slate-900">Choose Business</a></article>
</div>

02. Tailwind Dark Gradient Plan

TailwindDark

A single premium plan card with a gradient border made from a padded gradient wrapper around a dark inner card. bg-gradient-to-r on the button echoes the border, and the glow is a coloured shadow utility with transparency.

View code

<div class="rounded-3xl bg-gradient-to-br from-cyan-400 via-purple-500 to-pink-500 p-[1.5px] shadow-2xl shadow-purple-500/40">
  <article class="w-[min(320px,86vw)] rounded-[22px] bg-slate-950 p-7 text-slate-400">
    <p class="text-xs font-bold uppercase tracking-widest text-purple-200">Lifetime</p>
    <p class="mt-2 text-4xl font-extrabold text-white">$249 <span class="text-sm font-medium text-slate-400">once</span></p>
    <p class="mt-2 text-sm leading-relaxed">Every template we release, now and later.</p>
    <ul class="my-5 space-y-2 text-sm text-slate-300"><li>&#10022; 120+ templates</li><li>&#10022; Free updates</li><li>&#10022; Commercial licence</li></ul>
    <a href="#" class="block rounded-xl bg-gradient-to-r from-cyan-400 to-purple-500 py-3 text-center font-extrabold text-slate-950">Get lifetime access</a>
  </article>
</div>

03. Tailwind Pricing with Period Switch

TailwindJavaScript

Two plans with a Monthly and Yearly switch above them. The prices live in data attributes and a few lines of script swap them; the switch buttons use aria-checked inside a radiogroup, styled with the aria-checked: variant.

View code

<div class="grid w-full max-w-xl justify-items-center gap-5">
  <div role="radiogroup" aria-label="Billing period" class="inline-flex rounded-full bg-slate-800 p-1 text-sm font-semibold">
    <button role="radio" aria-checked="true" data-p="m" class="twbp rounded-full px-4 py-2 text-slate-400 aria-checked:bg-white aria-checked:text-slate-900">Monthly</button>
    <button role="radio" aria-checked="false" data-p="y" class="twbp rounded-full px-4 py-2 text-slate-400 aria-checked:bg-white aria-checked:text-slate-900">Yearly, 2 months free</button>
  </div>
  <div class="grid w-full gap-4 sm:grid-cols-2">
    <article class="rounded-2xl border border-slate-800 bg-slate-900 p-6 text-slate-400"><h3 class="font-bold text-white">Creator</h3><p class="twamt mt-2 text-4xl font-extrabold text-white" data-m="$15" data-y="$150">$15</p><p class="twunit mb-5 text-sm">per month</p><a href="#" class="block rounded-lg bg-indigo-600 py-2.5 text-center text-sm font-bold text-white">Start free trial</a></article>
    <article class="rounded-2xl border border-slate-800 bg-slate-900 p-6 text-slate-400"><h3 class="font-bold text-white">Studio</h3><p class="twamt mt-2 text-4xl font-extrabold text-white" data-m="$39" data-y="$390">$39</p><p class="twunit mb-5 text-sm">per month</p><a href="#" class="block rounded-lg bg-indigo-600 py-2.5 text-center text-sm font-bold text-white">Start free trial</a></article>
  </div>
</div>

const bp = document.querySelectorAll('.twbp');
bp.forEach(b => b.addEventListener('click', () => {
  bp.forEach(x => x.setAttribute('aria-checked', String(x === b)));
  const y = b.dataset.p === 'y';
  document.querySelectorAll('.twamt').forEach(a => a.textContent = y ? a.dataset.y : a.dataset.m);
  document.querySelectorAll('.twunit').forEach(u => u.textContent = y ? 'per year' : 'per month');
}));

04. Tailwind Plan Comparison Table

TailwindTable

A semantic comparison table styled with Tailwind, with scoped header cells and hidden Included and Not included text behind the visual ticks. The recommended column is tinted with nth-child arbitrary variants, and the table scrolls sideways on phones.

View code

<div class="w-full max-w-xl overflow-x-auto rounded-2xl bg-white shadow-lg shadow-slate-900/10">
  <table class="w-full border-collapse text-center text-sm text-slate-700 [&_td:nth-child(3)]:bg-violet-50 [&_th:nth-child(3)]:bg-violet-50">
    <caption class="px-4 pt-4 text-left text-base font-extrabold text-slate-900">Compare plans</caption>
    <thead><tr class="border-b border-slate-100"><th scope="col" class="p-3 text-left">Feature</th><th scope="col" class="p-3">Free</th><th scope="col" class="p-3">Plus</th><th scope="col" class="p-3">Team</th></tr></thead>
    <tbody class="divide-y divide-slate-100">
      <tr><th scope="row" class="p-3 text-left font-semibold text-slate-900">Projects</th><td class="p-3">3</td><td class="p-3">Unlimited</td><td class="p-3">Unlimited</td></tr>
      <tr><th scope="row" class="p-3 text-left font-semibold text-slate-900">Custom domain</th><td class="p-3">&mdash;<span class="sr-only">Not included</span></td><td class="p-3">&#10003;<span class="sr-only">Included</span></td><td class="p-3">&#10003;<span class="sr-only">Included</span></td></tr>
      <tr><th scope="row" class="p-3 text-left font-semibold text-slate-900">Members</th><td class="p-3">1</td><td class="p-3">1</td><td class="p-3">20</td></tr>
    </tbody>
  </table>
</div>

05. Tailwind Plan Rows

TailwindSettings

Plans as wide rows for an account settings page, marking the current plan with a badge and a disabled button. grid-cols-[1fr_auto_auto] aligns name, price and action, and the row stacks with sm: breakpoints on phones.

View code

<ul class="grid w-full max-w-xl gap-3">
  <li class="grid items-center gap-2 rounded-2xl border border-slate-200 bg-white p-4 sm:grid-cols-[1fr_auto_auto] sm:gap-5"><div><h3 class="font-bold text-slate-900">Hobby <span class="ml-1 rounded-full bg-green-50 px-2 py-0.5 align-middle text-[11px] font-bold text-green-700">Current</span></h3><p class="text-sm text-slate-500">Personal projects.</p></div><p class="font-extrabold text-slate-900">Free</p><button disabled class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-bold text-slate-500">Selected</button></li>
  <li class="grid items-center gap-2 rounded-2xl border border-slate-200 bg-white p-4 sm:grid-cols-[1fr_auto_auto] sm:gap-5"><div><h3 class="font-bold text-slate-900">Pro</h3><p class="text-sm text-slate-500">For freelancers.</p></div><p class="font-extrabold text-slate-900">$18/mo</p><button class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-bold text-white">Upgrade</button></li>
  <li class="grid items-center gap-2 rounded-2xl border border-slate-200 bg-white p-4 sm:grid-cols-[1fr_auto_auto] sm:gap-5"><div><h3 class="font-bold text-slate-900">Agency</h3><p class="text-sm text-slate-500">Client workspaces.</p></div><p class="font-extrabold text-slate-900">$64/mo</p><button class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-bold text-white">Upgrade</button></li>
</ul>

06. Tailwind Pricing with Sales Strip

TailwindB2B

Two self-serve plans and a full-width Enterprise strip below that invites people to talk to sales. col-span-full stretches the strip across the grid, and on phones everything collapses into one column with the strip last.

View code

<div class="grid w-full max-w-xl gap-3 sm:grid-cols-2">
  <article class="rounded-2xl border border-slate-800 bg-slate-900 p-5 text-slate-400"><h3 class="font-bold text-white">Team</h3><p class="my-3 text-3xl font-extrabold text-white">$20 <span class="text-sm font-medium text-slate-400">per seat</span></p><a href="#" class="inline-block rounded-lg bg-white px-4 py-2 text-sm font-bold text-slate-900">Start trial</a></article>
  <article class="rounded-2xl border border-slate-800 bg-slate-900 p-5 text-slate-400"><h3 class="font-bold text-white">Business</h3><p class="my-3 text-3xl font-extrabold text-white">$45 <span class="text-sm font-medium text-slate-400">per seat</span></p><a href="#" class="inline-block rounded-lg bg-white px-4 py-2 text-sm font-bold text-slate-900">Start trial</a></article>
  <article class="col-span-full flex flex-col items-start justify-between gap-4 rounded-2xl border border-slate-800 bg-gradient-to-r from-slate-800 to-slate-900 p-5 text-slate-400 sm:flex-row sm:items-center"><div><h3 class="font-bold text-white">Enterprise</h3><p class="text-sm">Single sign-on, audit logs and custom contracts.</p></div><a href="#" class="shrink-0 rounded-lg border-2 border-white px-4 py-2 text-sm font-bold text-white">Talk to sales</a></article>
</div>

About these Tailwind Pricing Tables

Highlighting a plan

The middle card is lifted with -translate-y-2 and outlined with ring-2 ring-indigo-600. A coloured shadow such as shadow-indigo-500/20 adds depth without a hard border.

Gradient borders

Wrap the card in a gradient element with p-[1.5px] and give the inner card a solid background and a slightly smaller radius. The gradient shows through the padding as a border.

Arbitrary variants for lists

[&>li]:before:content-['\2713'] adds a tick before every list item from the parent, so the list items stay clean markup.

Tables stay semantic

The comparison demo is a real table with scoped headers and hidden Included text. The recommended column is tinted with nth-child arbitrary variants, and the wrapper scrolls on narrow screens.

Frequently asked questions

Which demo uses JavaScript?

Only the billing period switch.

How do I change the brand colour?

Replace indigo in the class names with your Tailwind colour, or define a brand colour in your theme.

Do the cards stack on phones?

Yes. The grids are single column until the sm or md breakpoint.