htmlintermediatepricingtablecardssaaslanding-page

How to implement Pricing Table in Html

Three-tier pricing table with a highlighted popular plan using Tailwind CSS

Quick Answer

Use grid md:grid-cols-3 gap-8 for the layout, ring-2 ring-indigo-600 to highlight the popular plan, and flex flex-col with mt-auto on the CTA button to pin it to each card's bottom.

Code Snippet

1<section class="max-w-6xl mx-auto px-4 py-20">
2  <div class="text-center mb-14">
3    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Simple, transparent pricing</h2>
4    <p class="text-lg text-gray-500">No hidden fees. Cancel anytime.</p>
5  </div>
6  <div class="grid md:grid-cols-3 gap-8 items-stretch">
7    <div class="bg-white border border-gray-200 rounded-2xl p-8 flex flex-col">
8      <h3 class="text-lg font-semibold text-gray-900 mb-1">Starter</h3>
9      <p class="text-sm text-gray-400 mb-6">For individuals and small projects</p>
10      <div class="mb-6"><span class="text-4xl font-bold text-gray-900">$0</span><span class="text-gray-400 ml-1">/month</span></div>
11      <ul class="space-y-3 text-sm text-gray-600 mb-8 flex-1">
12        <li class="flex items-center gap-2">5 projects</li>
13        <li class="flex items-center gap-2">1 GB storage</li>
14      </ul>
15      <a href="#" class="block text-center border border-gray-300 text-gray-700 font-semibold py-2.5 rounded-xl hover:bg-gray-50 transition-colors">Get started free</a>
16    </div>
17    <div class="bg-indigo-600 rounded-2xl p-8 flex flex-col shadow-xl relative">
18      <span class="absolute -top-3 left-1/2 -translate-x-1/2 bg-amber-400 text-amber-900 text-xs font-bold px-3 py-1 rounded-full">Most popular</span>
19      <h3 class="text-lg font-semibold text-white mb-1">Pro</h3>
20      <p class="text-sm text-indigo-200 mb-6">For growing teams and businesses</p>
21      <div class="mb-6"><span class="text-4xl font-bold text-white">$29</span><span class="text-indigo-300 ml-1">/month</span></div>
22      <ul class="space-y-3 text-sm text-indigo-100 mb-8 flex-1">
23        <li class="flex items-center gap-2">Unlimited projects</li>
24        <li class="flex items-center gap-2">50 GB storage</li>
25        <li class="flex items-center gap-2">Priority support</li>
26      </ul>
27      <a href="#" class="block text-center bg-white text-indigo-700 font-semibold py-2.5 rounded-xl hover:bg-indigo-50 transition-colors">Get Pro</a>
28    </div>
29    <div class="bg-white border border-gray-200 rounded-2xl p-8 flex flex-col">
30      <h3 class="text-lg font-semibold text-gray-900 mb-1">Enterprise</h3>
31      <p class="text-sm text-gray-400 mb-6">For large organisations</p>
32      <div class="mb-6"><span class="text-4xl font-bold text-gray-900">$99</span><span class="text-gray-400 ml-1">/month</span></div>
33      <ul class="space-y-3 text-sm text-gray-600 mb-8 flex-1">
34        <li class="flex items-center gap-2">Everything in Pro</li>
35        <li class="flex items-center gap-2">SSO & SAML</li>
36        <li class="flex items-center gap-2">Dedicated support</li>
37      </ul>
38      <a href="#" class="block text-center border border-gray-300 text-gray-700 font-semibold py-2.5 rounded-xl hover:bg-gray-50 transition-colors">Contact sales</a>
39    </div>
40  </div>
41</section>

What is Pricing Table?

A well-designed pricing table builds trust and drives conversions. This Tailwind CSS pricing table features three tiers (Starter, Pro, Enterprise), a visually highlighted Most Popular plan, feature comparison lists with checkmarks, and clear CTA buttons. The layout is fully responsive using CSS Grid.

How It Works

1grid md:grid-cols-3 stacks cards vertically on mobile and places them side by side on md+ screens
2The popular card gets bg-indigo-600 and ring-2 ring-indigo-600 to visually distinguish it
3flex flex-col h-full with mt-auto on the button ensures all CTA buttons align at the same vertical position
4The Most Popular badge uses absolute -top-3 left-1/2 -translate-x-1/2 to float above the card border

Common Use Cases

SaaS products - Display monthly and annual pricing tiers
Subscription services - Show plan differences with feature lists
Freelance sites - Present service packages to potential clients
Course platforms - Offer free, premium, and team plan options

Key Benefits

Grid-based layout adapts cleanly from 1 to 3 columns
Highlighted plan draws attention to the most profitable tier
Easy to add or remove feature rows
Accessible with clear visual hierarchy

Common Mistakes to Avoid

Not adding relative to the popular card, causing the absolutely positioned badge to escape its boundary
Omitting h-full or flex-1 on the feature list, resulting in misaligned CTA buttons across cards
Hardcoding colours rather than using Tailwind theme tokens, making future theme changes tedious

Quick Tips

Click the "Copy" button above to copy the code to your clipboard
This code is production-ready and can be used in your projects immediately
Check out related snippets below for more html examples

Frequently Asked Questions

How do I add a monthly/annual billing toggle to a Tailwind pricing table?

Use Alpine.js or React state to track a billing boolean. Conditionally render monthly vs annual prices, and add a toggle switch component above the grid.

How do I add a feature comparison table below the pricing cards?

Use a semantic <table> with Tailwind utilities: divide-y divide-gray-200 on <tbody> and text-center on <td>. Add bg-indigo-50 to the Pro column cells to maintain the visual highlight.

Related Snippets

html

beginner

Gradient Hero Section

Eye-catching hero section with gradient background, headline, and CTA buttons

herogradientlanding-page+2

About This Html Code Snippet

This free html code snippet for pricing table is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this intermediate-level example will help you implement pricing table quickly and correctly.

All snippets in the Snippetly library follow html best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses html.

Tags: pricing, table, cards, saas, landing-page | Language: html | Difficulty: intermediate | Category: Tailwind CSS

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started Free Browse More Snippets