Tailwind CSS Pricing Table Examples

Pricing sections for SaaS and product pages — three-tier plan cards, a no-JavaScript monthly/yearly billing switch and an accessible feature comparison table.

3 components · live preview · copy as HTML or JSX · free for commercial use

3 pricing tables to copy

Three-Tier Pricing

Pricing Tables

Simple, transparent pricing

Start free, upgrade when your team grows.

Starter

$0/month

1 project
Community support

Get started

Pro

$19/month

Unlimited projects
Custom domains
Priority email support

Start free trial

Team

$49/month

Everything in Pro
10 team seats
SSO and audit log

Contact sales

The featured plan is marked by a label and a thicker border, not by color alone. Each card is a flex column with a flex-1 feature list, so the buttons line up.

<section class="w-full bg-white px-4 py-12">
  <div class="mx-auto max-w-2xl text-center">
    <h2 class="text-3xl font-extrabold tracking-tight text-slate-900">Simple, transparent pricing</h2>
    <p class="mt-3 text-slate-600">Start free, upgrade when your team grows.</p>
  </div>
  <div class="mx-auto mt-10 grid max-w-5xl gap-6 md:grid-cols-3">
    <div class="flex flex-col rounded-2xl border border-slate-200 p-6">
      <h3 class="text-sm font-semibold text-slate-900">Starter</h3>
      <p class="mt-4"><span class="text-4xl font-extrabold text-slate-900">$0</span><span class="text-sm text-slate-500">/month</span></p>
      <ul class="mt-6 flex-1 space-y-3 text-sm text-slate-600">
        <li class="flex gap-2"><svg class="h-5 w-5 shrink-0 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /></svg>1 project</li>
        <li class="flex gap-2"><svg class="h-5 w-5 shrink-0 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /></svg>Community support</li>
      </ul>
      <a href="#" class="mt-8 rounded-xl border border-slate-300 px-4 py-2.5 text-center text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50">Get started</a>
    </div>
    <div class="relative flex flex-col rounded-2xl border-2 border-indigo-600 p-6 shadow-xl">
      <p class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-indigo-600 px-3 py-1 text-xs font-semibold text-white">Most popular</p>
      <h3 class="text-sm font-semibold text-indigo-600">Pro</h3>
      <p class="mt-4"><span class="text-4xl font-extrabold text-slate-900">$19</span><span class="text-sm text-slate-500">/month</span></p>
      <ul class="mt-6 flex-1 space-y-3 text-sm text-slate-600">
        <li class="flex gap-2"><svg class="h-5 w-5 shrink-0 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /></svg>Unlimited projects</li>
        <li class="flex gap-2"><svg class="h-5 w-5 shrink-0 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /></svg>Custom domains</li>
        <li class="flex gap-2"><svg class="h-5 w-5 shrink-0 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /></svg>Priority email support</li>
      </ul>
      <a href="#" class="mt-8 rounded-xl bg-indigo-600 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition-colors hover:bg-indigo-700">Start free trial</a>
    </div>
    <div class="flex flex-col rounded-2xl border border-slate-200 p-6">
      <h3 class="text-sm font-semibold text-slate-900">Team</h3>
      <p class="mt-4"><span class="text-4xl font-extrabold text-slate-900">$49</span><span class="text-sm text-slate-500">/month</span></p>
      <ul class="mt-6 flex-1 space-y-3 text-sm text-slate-600">
        <li class="flex gap-2"><svg class="h-5 w-5 shrink-0 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /></svg>Everything in Pro</li>
        <li class="flex gap-2"><svg class="h-5 w-5 shrink-0 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /></svg>10 team seats</li>
        <li class="flex gap-2"><svg class="h-5 w-5 shrink-0 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /></svg>SSO and audit log</li>
      </ul>
      <a href="#" class="mt-8 rounded-xl border border-slate-300 px-4 py-2.5 text-center text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50">Contact sales</a>
    </div>
  </div>
</section>

Pricing with Monthly/Yearly Toggle

Pricing Tables

Plans that grow with you

Monthly Yearly Save 20%

Personal

For solo makers and side projects.

$12/month $115/year

Choose Personal

Business

For growing teams that need more control.

$39/month $374/year

Choose Business

CSS-only billing switch: a hidden checkbox plus the named group-has-[:checked]/pricing variant swaps the prices — no JavaScript.

<section class="group/pricing w-full bg-slate-50 px-4 py-12">
  <div class="mx-auto max-w-2xl text-center">
    <h2 class="text-3xl font-extrabold tracking-tight text-slate-900">Plans that grow with you</h2>
    <label class="mt-6 inline-flex cursor-pointer items-center gap-3 text-sm font-medium text-slate-600">
      <span>Monthly</span>
      <input type="checkbox" aria-label="Bill yearly" class="peer sr-only" />
      <span class="relative h-6 w-11 rounded-full bg-slate-300 transition-colors after:absolute after:left-0.5 after:top-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow-sm after:transition-transform peer-checked:bg-indigo-600 peer-checked:after:translate-x-5 peer-focus-visible:ring-2 peer-focus-visible:ring-indigo-500 peer-focus-visible:ring-offset-2"></span>
      <span>Yearly <span class="ml-1 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-700">Save 20%</span></span>
    </label>
  </div>
  <div class="mx-auto mt-10 grid max-w-3xl gap-6 sm:grid-cols-2">
    <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
      <h3 class="text-lg font-bold text-slate-900">Personal</h3>
      <p class="mt-1 text-sm text-slate-500">For solo makers and side projects.</p>
      <p class="mt-6 text-4xl font-extrabold text-slate-900">
        <span class="group-has-[:checked]/pricing:hidden">$12<span class="text-sm font-medium text-slate-500">/month</span></span>
        <span class="hidden group-has-[:checked]/pricing:inline">$115<span class="text-sm font-medium text-slate-500">/year</span></span>
      </p>
      <a href="#" class="mt-6 block rounded-xl border border-slate-300 px-4 py-2.5 text-center text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50">Choose Personal</a>
    </div>
    <div class="rounded-2xl bg-slate-900 p-6 text-white shadow-xl">
      <h3 class="text-lg font-bold">Business</h3>
      <p class="mt-1 text-sm text-slate-300">For growing teams that need more control.</p>
      <p class="mt-6 text-4xl font-extrabold">
        <span class="group-has-[:checked]/pricing:hidden">$39<span class="text-sm font-medium text-slate-300">/month</span></span>
        <span class="hidden group-has-[:checked]/pricing:inline">$374<span class="text-sm font-medium text-slate-300">/year</span></span>
      </p>
      <a href="#" class="mt-6 block rounded-xl bg-indigo-500 px-4 py-2.5 text-center text-sm font-semibold text-white transition-colors hover:bg-indigo-400">Choose Business</a>
    </div>
  </div>
</section>

Pricing Comparison Table

Pricing Tables

Plan feature comparison
Features	Free$0/mo	Pro$19/mo	EnterpriseCustom
Projects	3	Unlimited	Unlimited
Custom domain	Not included	Included	Included
SSO / SAML	Not included	Not included	Included
Support	Community	Priority email	Dedicated manager

A real <table> with row and column headers, so screen readers announce each feature against its plan. Scrolls sideways on small screens.

<div class="w-full overflow-x-auto rounded-2xl border border-slate-200 bg-white">
  <table class="w-full min-w-[36rem] text-sm">
    <caption class="sr-only">Plan feature comparison</caption>
    <thead>
      <tr class="border-b border-slate-200">
        <th scope="col" class="px-5 py-4 text-left font-semibold text-slate-900">Features</th>
        <th scope="col" class="px-5 py-4 text-center font-semibold text-slate-900">Free<span class="block text-xs font-normal text-slate-500">$0/mo</span></th>
        <th scope="col" class="bg-indigo-50 px-5 py-4 text-center font-semibold text-indigo-700">Pro<span class="block text-xs font-normal text-indigo-600">$19/mo</span></th>
        <th scope="col" class="px-5 py-4 text-center font-semibold text-slate-900">Enterprise<span class="block text-xs font-normal text-slate-500">Custom</span></th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100 text-slate-600">
      <tr>
        <th scope="row" class="px-5 py-3 text-left font-medium text-slate-700">Projects</th>
        <td class="px-5 py-3 text-center">3</td>
        <td class="bg-indigo-50 px-5 py-3 text-center">Unlimited</td>
        <td class="px-5 py-3 text-center">Unlimited</td>
      </tr>
      <tr>
        <th scope="row" class="px-5 py-3 text-left font-medium text-slate-700">Custom domain</th>
        <td class="px-5 py-3 text-center"><span aria-hidden="true" class="text-slate-300">—</span><span class="sr-only">Not included</span></td>
        <td class="bg-indigo-50 px-5 py-3"><span class="flex justify-center"><svg class="h-5 w-5 shrink-0 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /></svg></span><span class="sr-only">Included</span></td>
        <td class="px-5 py-3"><span class="flex justify-center"><svg class="h-5 w-5 shrink-0 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /></svg></span><span class="sr-only">Included</span></td>
      </tr>
      <tr>
        <th scope="row" class="px-5 py-3 text-left font-medium text-slate-700">SSO / SAML</th>
        <td class="px-5 py-3 text-center"><span aria-hidden="true" class="text-slate-300">—</span><span class="sr-only">Not included</span></td>
        <td class="bg-indigo-50 px-5 py-3 text-center"><span aria-hidden="true" class="text-slate-300">—</span><span class="sr-only">Not included</span></td>
        <td class="px-5 py-3"><span class="flex justify-center"><svg class="h-5 w-5 shrink-0 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /></svg></span><span class="sr-only">Included</span></td>
      </tr>
      <tr>
        <th scope="row" class="px-5 py-3 text-left font-medium text-slate-700">Support</th>
        <td class="px-5 py-3 text-center">Community</td>
        <td class="bg-indigo-50 px-5 py-3 text-center">Priority email</td>
        <td class="px-5 py-3 text-center">Dedicated manager</td>
      </tr>
    </tbody>
  </table>
</div>

Designing a pricing section

Most pricing pages work best with three plans: a free or entry tier, a recommended middle tier and a premium tier. Highlight the plan you want most people to choose with a label such as Most popular, a thicker border and a filled button, and keep the feature lists short, putting the differences first. The three-tier example makes each card a flex column with a flex-1 feature list, so the buttons line up even when lists differ in length.

The billing toggle is pure CSS: a visually hidden checkbox inside a section marked group/pricing, and prices that switch with group-has-[:checked]/pricing:hidden. Using a named group keeps the toggle from reacting to other checkboxes elsewhere on the page.

Comparison tables and accessibility

When plans differ on many features, add a comparison table under the cards. Use a real <table> with <th scope="col"> for plans and <th scope="row"> for features so screen readers announce each cell in context, and pair check icons with visually hidden Included / Not included text. Wrap wide tables in overflow-x-auto so they scroll on phones instead of breaking the layout.

← Back to the full UI Component Library

Frequently Asked Questions

How do I build a monthly/yearly pricing toggle without JavaScript?↓

Put a checkbox with the sr-only class inside a wrapper marked group/pricing, then show each price with group-has-[:checked]/pricing:hidden or hidden group-has-[:checked]/pricing:inline. The Pricing with Monthly/Yearly Toggle component shows the full pattern.

How many pricing tiers should I show?↓

Three is the common choice: it gives a clear entry point, a recommended plan and a premium anchor. Add an Enterprise or Contact us option as a link or a fourth card only if you sell to larger teams.

How do I highlight the recommended plan?↓

Combine several cues: a Most popular label, a thicker or colored border, a stronger shadow and a filled primary button. Don't rely on color alone, so the emphasis also reaches users with color-vision deficiencies.

Last updated: November 7, 2026