Comparison Pricing Table Component

A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

This tailwind example is contributed by Hamza Atig, on 18-Apr-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans,simulation,copy,dummy,miniature,like

Pricing Table Other Grid Mockup

Author Hamza Atig

Tailwind v3.4 2k 6

Fork Fullscreen

<div class="md:hidden">
            
            <div class="p-6 border-b border-gray-200">
                <h2 class="text-2xl font-bold text-gray-800 text-center mb-4">Free</h2>
                <div class="text-center mb-4">
                    <span class="text-4xl font-bold text-gray-800">$0</span>
                    <span class="text-gray-500">/mo</span>
                    <p class="text-xs text-gray-500 mt-1">No credit card required</p>
                </div>
                <ul class="space-y-3 my-6 text-sm">
                    <li class="flex items-center justify-between">
                        <span>Core Feature Set</span><i class="fas fa-check text-green-500 text-lg ml-2"></i></li>
                    <li class="flex items-center justify-between">
                        <span>Basic Integrations</span><i class="fas fa-check text-green-500 text-lg ml-2"></i></li>
                    <li class="flex items-center justify-between">
                        <span>Standard Templates</span><i class="fas fa-check text-green-500 text-lg ml-2"></i></li>
                    <li class="flex items-center justify-between">
                        <span>Limited Client Management</span><i class="fas fa-check text-green-500 text-lg ml-2"></i>
                    </li>
                    <li class="flex items-center justify-between text-gray-500">
                        <span>Custom Editable Templates</span><i class="fas fa-times text-red-400 text-lg ml-2"></i>
                    </li>
                    <li class="flex items-center justify-between text-gray-500">
                        <span>Unlimited Client Management</span><i class="fas fa-times text-red-400 text-lg ml-2"></i>
                    </li>
                    <li class="flex items-center justify-between text-gray-500">
                        <span>Custom Branding</span><i class="fas fa-times text-red-400 text-lg ml-2"></i></li>
                    <li class="flex items-center justify-between text-gray-500">
                        <span>Advanced Business Analytics</span><i class="fas fa-times text-red-400 text-lg ml-2"></i>
                    </li>
                    <li class="flex items-center justify-between text-gray-500">
                        <span>Priority Support</span><i class="fas fa-times text-red-400 text-lg ml-2"></i></li>
                </ul>
                <a href="#"
                    class="block w-full px-6 py-3 border border-green-500 text-green-500 rounded hover:bg-green-50 font-semibold transition duration-200 text-center">
                    Get Started
                </a>
            </div>

<div class="p-6 bg-gray-50 border-t-4 border-t-green-500">
                <h2 class="text-2xl font-bold text-gray-800 text-center mb-4">Unlimited</h2>
                <div class="text-center mb-4">
                    
                    <div class="flex items-center justify-center space-x-2 mb-3">
                        <span class="text-xs font-medium text-gray-500">MONTHLY</span>
                        <div class="relative inline-block align-middle select-none transition duration-200 ease-in">
                            <input type="checkbox" name="toggle_mobile" id="toggle_mobile" class="toggle-checkbox" checked/>
                            <label for="toggle_mobile" class="toggle-label"></label>
                        </div>
                        <span class="text-xs font-medium text-green-600">ANNUALLY</span>
                    </div>
                    
                    <span class="text-4xl font-bold text-gray-800">$18</span>
                    <span class="text-gray-500">/mo</span>
                    <p class="text-xs text-pink-600 font-semibold mt-1">SAVE 25% ANNUALLY!</p>
                </div>
                <ul class="space-y-3 my-6 text-sm">
                    <li class="flex items-center justify-between">
                        <span>Core Feature Set</span><i class="fas fa-check text-green-500 text-lg ml-2"></i></li>
                    <li class="flex items-center justify-between">
                        <span>Basic Integrations</span><i class="fas fa-check text-green-500 text-lg ml-2"></i></li>
                    <li class="flex items-center justify-between">
                        <span>Standard Templates</span><i class="fas fa-check text-green-500 text-lg ml-2"></i></li>
                    <li class="flex items-center justify-between">
                        <span>Limited Client Management</span><i class="fas fa-check text-green-500 text-lg ml-2"></i>
                    </li>
                    <li class="flex items-center justify-between">
                        <span>Custom Editable Templates</span><i class="fas fa-check text-green-500 text-lg ml-2"></i>
                    </li>
                    <li class="flex items-center justify-between">
                        <span>Unlimited Client Management</span><i class="fas fa-check text-green-500 text-lg ml-2"></i>
                    </li>
                    <li class="flex items-center justify-between">
                        <span>Custom Branding</span><i class="fas fa-check text-green-500 text-lg ml-2"></i></li>
                    <li class="flex items-center justify-between">
                        <span>Advanced Business Analytics</span><i class="fas fa-check text-green-500 text-lg ml-2"></i>
                    </li>
                    <li class="flex items-center justify-between">
                        <span>Priority Support</span><i class="fas fa-check text-green-500 text-lg ml-2"></i></li>
                </ul>
                <a href="#"
                    class="block w-full px-6 py-3 bg-green-500 text-white rounded hover:bg-green-600 font-semibold transition duration-200 text-center">
                    Get Started
                </a>
            </div>
        </div>

<div class="hidden md:grid md:grid-cols-[2fr_1fr_1fr]">

<div class="p-6 border-b border-r border-gray-200">
                
            </div>
            <div class="p-6 text-center border-b border-r border-gray-200">
                <h2 class="text-2xl font-bold text-gray-800">Free</h2>
            </div>
            <div class="p-6 text-center border-b border-gray-200 bg-gray-50 border-t-4 border-t-green-500">
                <h2 class="text-2xl font-bold text-gray-800">Unlimited</h2>
            </div>

<div class="p-4 border-b border-r border-gray-200 text-sm text-gray-700 flex items-center">Core Feature Set
            </div>
            <div class="p-4 border-b border-r border-gray-200 text-center flex justify-center items-center">
                <i class="fas fa-check text-green-500 text-lg"></i>
            </div>
            <div class="p-4 border-b border-gray-200 text-center bg-gray-50 flex justify-center items-center">
                <i class="fas fa-check text-green-500 text-lg"></i>
            </div>

<div class="p-4 border-b border-r border-gray-200 text-sm text-gray-700 flex items-center">Basic
                Integrations</div>
            <div class="p-4 border-b border-r border-gray-200 text-center flex justify-center items-center">
                <i class="fas fa-check text-green-500 text-lg"></i>
            </div>
            <div class="p-4 border-b border-gray-200 text-center bg-gray-50 flex justify-center items-center">
                <i class="fas fa-check text-green-500 text-lg"></i>
            </div>

<div class="p-4 border-b border-r border-gray-200 text-sm text-gray-700 flex items-center">Standard
                Templates</div>
            <div class="p-4 border-b border-r border-gray-200 text-center flex justify-center items-center">
                <i class="fas fa-check text-green-500 text-lg"></i>
            </div>
            <div class="p-4 border-b border-gray-200 text-center bg-gray-50 flex justify-center items-center">
                <i class="fas fa-check text-green-500 text-lg"></i>
            </div>

<div class="p-4 border-b border-r border-gray-200 text-sm text-gray-700 flex items-center">Limited Client
                Management</div>
            <div class="p-4 border-b border-r border-gray-200 text-center flex justify-center items-center">
                <i class="fas fa-check text-green-500 text-lg"></i>
            </div>
            <div class="p-4 border-b border-gray-200 text-center bg-gray-50 flex justify-center items-center">
                <i class="fas fa-check text-green-500 text-lg"></i>
            </div>

<div class="p-4 border-b border-r border-gray-200 text-sm text-gray-700 flex items-center">Custom Editable
                Templates</div>
            <div class="p-4 border-b border-r border-gray-200 text-center flex justify-center items-center">
                <i class="fas fa-times text-red-400 text-lg"></i> 
            </div>
            <div class="p-4 border-b border-gray-200 text-center bg-gray-50 flex justify-center items-center">
                <i class="fas fa-check text-green-500 text-lg"></i>
            </div>

<div class="p-4 border-b border-r border-gray-200 text-sm text-gray-700 flex items-center">Unlimited Client
                Management</div>
            <div class="p-4 border-b border-r border-gray-200 text-center flex justify-center items-center">
                <i class="fas fa-times text-red-400 text-lg"></i> 
            </div>
            <div class="p-4 border-b border-gray-200 text-center bg-gray-50 flex justify-center items-center">
                <i class="fas fa-check text-green-500 text-lg"></i>
            </div>

<div class="p-4 border-b border-r border-gray-200 text-sm text-gray-700 flex items-center">Custom Branding
            </div>
            <div class="p-4 border-b border-r border-gray-200 text-center flex justify-center items-center">
                <i class="fas fa-times text-red-400 text-lg"></i> 
            </div>
            <div class="p-4 border-b border-gray-200 text-center bg-gray-50 flex justify-center items-center">
                <i class="fas fa-check text-green-500 text-lg"></i>
            </div>

<div class="p-4 border-b border-r border-gray-200 text-sm text-gray-700 flex items-center">Advanced Business
                Analytics</div>
            <div class="p-4 border-b border-r border-gray-200 text-center flex justify-center items-center">
                <i class="fas fa-times text-red-400 text-lg"></i> 
            </div>
            <div class="p-4 border-b border-gray-200 text-center bg-gray-50 flex justify-center items-center">
                <i class="fas fa-check text-green-500 text-lg"></i>
            </div>

<div class="p-4 border-b border-r border-gray-200 text-sm text-gray-700 flex items-center">Priority Support
            </div>
            <div class="p-4 border-b border-r border-gray-200 text-center flex justify-center items-center">
                <i class="fas fa-times text-red-400 text-lg"></i> 
            </div>
            <div class="p-4 border-b border-gray-200 text-center bg-gray-50 flex justify-center items-center">
                <i class="fas fa-check text-green-500 text-lg"></i>
            </div>

<div class="p-6 border-r border-gray-200">
                
            </div>

<div
                class="p-6 text-center border-r border-gray-200 flex flex-col items-center justify-between min-h-[200px]">
                
                <div class="mb-4">
                    <span class="text-4xl font-bold text-gray-800">$0</span>
                    <span class="text-gray-500">/mo</span>
                    <p class="text-xs text-gray-500 mt-2">No credit card required</p>
                </div>
                
                <a href="#"
                    class="mt-auto inline-block w-full max-w-[200px] px-6 py-3 border border-green-500 text-green-500 rounded hover:bg-green-50 font-semibold transition duration-200 text-center">
                    Get Started
                </a>
            </div>

<div class="p-6 text-center bg-gray-50 flex flex-col items-center justify-between min-h-[200px]">
                
                <div class="mb-4">
                    
                    <div class="flex items-center justify-center space-x-2 mb-3">
                        <span class="text-xs font-medium text-gray-500">MONTHLY</span>
                        <div class="relative inline-block align-middle select-none transition duration-200 ease-in">
                            <input type="checkbox" name="toggle_desktop" id="toggle_desktop" class="toggle-checkbox" checked/>
                            <label for="toggle_desktop" class="toggle-label"></label>
                        </div>
                        <span class="text-xs font-medium text-green-600">ANNUALLY</span>
                    </div>
                    
                    <span class="text-4xl font-bold text-gray-800">$18</span>
                    <span class="text-gray-500">/mo</span>
                    <p class="text-xs text-pink-600 font-semibold mt-2">SAVE 25% ANNUALLY!</p>
                </div>
                
                <a href="#"
                    class="mt-auto inline-block w-full max-w-[200px] px-6 py-3 bg-green-500 text-white rounded hover:bg-green-600 font-semibold transition duration-200 text-center">
                    Get Started
                </a>
            </div>

</div> 
    </div>

</body>

Related Examples

Pricing Table

Akshay

4 years ago

11.4k
Show credit card details

Manuela Bianka

3 years ago

13.2k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Andreas Wagner

2 years ago

15.4k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Ameth Galarcio

2 years ago

2.6k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Christian Ahlin

1 year ago

2.9k
Table
Table with image and status with pagination buttons

Abhiraj

1 year ago

2.9k
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Banshee

1 year ago

2.1k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Ameth Galarcio

1 year ago

2.9k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Ameth Galarcio

1 year ago

2.3k
Table CRUD
CRUD TABLE DESIGN

Abhiraj

1 year ago

5k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

rohit whyphy

1 year ago

1.6k
Active Beauty Main Page

Maxim

1 year ago

1.8k