Tailwind CSS Guide
Tailwind CSS Pricing Table
Build a responsive 3-tier pricing section with a highlighted plan.
Last updated: October 2026 · Tested on Tailwind v4.0
Quick answer: Use grid grid-cols-1 md:grid-cols-3 gap-6 for the layout. Each plan is a card with a title, price, feature list, and CTA. Highlight one plan with scale-105 border-2 border-blue-500 shadow-xl and add a "Most Popular" badge using absolute positioning.
The Basic Structure
Every pricing table follows this layout:
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Free plan -->
<div class="pricing-card">...</div>
<!-- Pro plan (highlighted) -->
<div class="pricing-card highlighted">...</div>
<!-- Enterprise plan -->
<div class="pricing-card">...</div>
</div>On mobile, the plans stack vertically. On desktop, they line up side-by-side.
Build a Single Pricing Card
<div class="bg-slate-800 rounded-2xl p-6 border border-slate-700">
<h3 class="text-white font-bold text-lg">Free</h3>
<p class="text-slate-400 text-sm mt-1">For personal projects</p>
<div class="mt-6 flex items-baseline gap-1">
<span class="text-4xl font-black text-white">$0</span>
<span class="text-slate-400">/month</span>
</div>
<ul class="mt-6 space-y-3 text-slate-300 text-sm">
<li class="flex gap-2"><span>✅</span><span>3 projects</span></li>
<li class="flex gap-2"><span>✅</span><span>Community support</span></li>
<li class="flex gap-2"><span>✅</span><span>Basic analytics</span></li>
</ul>
<button class="w-full mt-6 bg-slate-700 hover:bg-slate-600 text-white py-2 rounded-lg transition">
Get Started
</button>
</div>Highlight the Popular Plan
The middle plan should stand out visually. Use scale, border, and shadow:
<div class="relative bg-slate-800 rounded-2xl p-6
border-2 border-blue-500
shadow-xl shadow-blue-500/10
md:scale-105">
<!-- Popular badge -->
<span class="absolute -top-3 left-1/2 -translate-x-1/2
bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full">
MOST POPULAR
</span>
<!-- Rest of card -->
</div>border-2 border-blue-500— accent border.shadow-xl shadow-blue-500/10— glowing shadow.md:scale-105— slightly larger than the others.absolute -top-3 left-1/2 -translate-x-1/2— centers the badge at the top.
Add a Monthly/Yearly Toggle
Add this above the grid to let users switch billing frequency:
<div class="flex justify-center mb-8">
<div class="inline-flex items-center bg-slate-800 rounded-full p-1">
<button id="monthly-btn" class="px-4 py-2 rounded-full text-sm font-medium
bg-blue-500 text-white transition">
Monthly
</button>
<button id="yearly-btn" class="px-4 py-2 rounded-full text-sm font-medium
text-slate-400 transition">
Yearly <span class="text-green-400 text-xs">Save 20%</span>
</button>
</div>
</div>Then in JavaScript, toggle the active state and swap prices:
<script>
const monthly = document.getElementById('monthly-btn');
const yearly = document.getElementById('yearly-btn');
function setActive(active, inactive) {
active.classList.add('bg-blue-500', 'text-white');
active.classList.remove('text-slate-400');
inactive.classList.remove('bg-blue-500', 'text-white');
inactive.classList.add('text-slate-400');
}
monthly.addEventListener('click', () => {
setActive(monthly, yearly);
// Swap price values here
});
yearly.addEventListener('click', () => {
setActive(yearly, monthly);
// Swap price values here
});
</script>The Complete Pricing Section
Here's everything combined into a production-ready section:
<section class="py-16 px-6 max-w-6xl mx-auto">
<h2 class="text-3xl md:text-4xl font-black text-white text-center">
Simple, transparent pricing
</h2>
<p class="text-slate-400 text-center mt-3 max-w-xl mx-auto">
Choose the plan that fits your needs. Cancel anytime.
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
<!-- Free -->
<div class="bg-slate-800 rounded-2xl p-6 border border-slate-700">
<h3 class="text-white font-bold text-lg">Free</h3>
<p class="text-slate-400 text-sm mt-1">For personal projects</p>
<div class="mt-6 flex items-baseline gap-1">
<span class="text-4xl font-black text-white">$0</span>
<span class="text-slate-400">/month</span>
</div>
<ul class="mt-6 space-y-3 text-slate-300 text-sm">
<li>✅ 3 projects</li>
<li>✅ Community support</li>
<li>✅ Basic analytics</li>
</ul>
<button class="w-full mt-6 bg-slate-700 hover:bg-slate-600 text-white py-2 rounded-lg transition">
Get Started
</button>
</div>
<!-- Pro (highlighted) -->
<div class="relative bg-slate-800 rounded-2xl p-6 border-2 border-blue-500
shadow-xl shadow-blue-500/10 md:scale-105">
<span class="absolute -top-3 left-1/2 -translate-x-1/2
bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full">
MOST POPULAR
</span>
<h3 class="text-white font-bold text-lg">Pro</h3>
<p class="text-slate-400 text-sm mt-1">For growing teams</p>
<div class="mt-6 flex items-baseline gap-1">
<span class="text-4xl font-black text-white">$29</span>
<span class="text-slate-400">/month</span>
</div>
<ul class="mt-6 space-y-3 text-slate-300 text-sm">
<li>✅ Unlimited projects</li>
<li>✅ Priority support</li>
<li>✅ Advanced analytics</li>
<li>✅ Custom domain</li>
</ul>
<button class="w-full mt-6 bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition font-medium">
Start Free Trial
</button>
</div>
<!-- Enterprise -->
<div class="bg-slate-800 rounded-2xl p-6 border border-slate-700">
<h3 class="text-white font-bold text-lg">Enterprise</h3>
<p class="text-slate-400 text-sm mt-1">For large organizations</p>
<div class="mt-6 flex items-baseline gap-1">
<span class="text-4xl font-black text-white">$99</span>
<span class="text-slate-400">/month</span>
</div>
<ul class="mt-6 space-y-3 text-slate-300 text-sm">
<li>✅ Everything in Pro</li>
<li>✅ SSO & SAML</li>
<li>✅ Dedicated support</li>
<li>✅ SLA guarantee</li>
</ul>
<button class="w-full mt-6 bg-slate-700 hover:bg-slate-600 text-white py-2 rounded-lg transition">
Contact Sales
</button>
</div>
</div>
</section>🛡️ Best Practices
- Highlight one plan only — usually the middle. Too many highlights dilute the effect.
- Place the most expensive plan on the right and cheapest on the left.
- Use checkmarks for included features and dimmed text for missing features (if comparing).
- Make the highlighted plan's CTA button visually different (colored vs neutral).
- Add a free trial option on the main plan to reduce commitment anxiety.
- Ensure mobile stacking works — the highlighted plan should not overlap other cards.
Mobile note: When using md:scale-105 on the highlighted plan, it can overflow on small screens. Always prefix with md: so scaling only happens on desktop.
❓ Frequently Asked Questions
How do I make a pricing table with Tailwind CSS?
Use grid grid-cols-1 md:grid-cols-3 gap-6 to arrange three pricing cards. Each card includes a title, price, feature list, and CTA button. Highlight the recommended plan with scale-105, border-2, and shadow-xl.
How do I highlight one plan in a Tailwind pricing table?
Add scale-105, border-2 border-blue-500, and shadow-xl to the highlighted plan. Optionally add a 'Most Popular' badge positioned absolutely at the top of the card.
How do I make a pricing table responsive in Tailwind?
Use grid-cols-1 for mobile and md:grid-cols-3 for desktop. This stacks cards vertically on mobile and shows them side-by-side on larger screens.
How do I add a monthly/yearly toggle to a Tailwind pricing table?
Use a checkbox or button with JavaScript to switch between two price values. Store both prices as data attributes and swap the displayed price on toggle.
How do I make the pricing table accessible?
Use semantic HTML: <section> for the table, <article> for each plan, and proper heading hierarchy. Add aria-labels to buttons and ensure sufficient color contrast.