Tailwind CSS cookbook · Intermediate
Design a pricing table with a highlighted plan
Show three pricing plans side by side, with the recommended plan visually emphasised and stacked cards on phones.
Approach
Use a three-column grid from md:. Emphasise one plan with a ring, a badge and a filled button. Use lists with
check marks for features and flex flex-col so the buttons line up.
Solution
<div class="grid gap-6 bg-slate-50 p-6 md:grid-cols-3">
<div class="flex flex-col rounded-2xl bg-white p-6 ring-1 ring-slate-200">
<h3 class="font-semibold">Starter</h3>
<p class="mt-2 text-3xl font-bold">$0<span class="text-sm font-normal text-slate-500">/month</span></p>
<ul class="mt-4 flex-1 space-y-2 text-sm text-slate-600"><li>✓ 1 project</li><li>✓ Community support</li></ul>
<a href="#" class="mt-6 rounded-lg px-4 py-2 text-center font-semibold text-indigo-600 ring-1 ring-indigo-200 hover:ring-indigo-400">Start free</a>
</div>
<div class="relative flex flex-col rounded-2xl bg-white p-6 shadow-xl ring-2 ring-indigo-600">
<span class="absolute -top-3 left-6 rounded-full bg-indigo-600 px-3 py-0.5 text-xs font-semibold text-white">Most popular</span>
<h3 class="font-semibold text-indigo-600">Pro</h3>
<p class="mt-2 text-3xl font-bold">$12<span class="text-sm font-normal text-slate-500">/month</span></p>
<ul class="mt-4 flex-1 space-y-2 text-sm text-slate-600"><li>✓ Unlimited projects</li><li>✓ Email support</li><li>✓ Analytics</li></ul>
<a href="#" class="mt-6 rounded-lg bg-indigo-600 px-4 py-2 text-center font-semibold text-white hover:bg-indigo-500">Start trial</a>
</div>
<div class="flex flex-col rounded-2xl bg-white p-6 ring-1 ring-slate-200">
<h3 class="font-semibold">Team</h3>
<p class="mt-2 text-3xl font-bold">$49<span class="text-sm font-normal text-slate-500">/month</span></p>
<ul class="mt-4 flex-1 space-y-2 text-sm text-slate-600"><li>✓ Everything in Pro</li><li>✓ SSO</li><li>✓ Priority support</li></ul>
<a href="#" class="mt-6 rounded-lg px-4 py-2 text-center font-semibold text-indigo-600 ring-1 ring-indigo-200 hover:ring-indigo-400">Contact sales</a>
</div>
</div>
Pitfalls
- Check marks as the only signal; screen readers read them oddly. Use
<span class="sr-only">Included:</span>or an icon with a label. - Prices with the period in the same font size; separate them for scannability.
Variations
- Add a monthly/yearly toggle with radio inputs and
has-checked:to switch prices without JavaScript. - Scale the featured card with
md:scale-105.
Further reading: Tailwind CSS docs
Reference: https://tailwindcss.com/docs/box-shadow