Home
Hamza Atig
Comparison Pricing Table Component

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 CSS v3. 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

838

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

Author:
Akshay

3 years ago

10.8k
Show credit card details

Author:
Manuela Bianka

2 years ago

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

Author:
Andreas Wagner

2 years ago

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

Author:
Ameth Galarcio

1 year ago

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

Author:
Christian Ahlin

10 months ago

1.9k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

9 months ago

2.1k
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. 🚀

Author:
Banshee

9 months ago

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

Author:
Ameth Galarcio

8 months ago

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

Author:
Ameth Galarcio

8 months ago

1.6k
Table CRUD
CRUD TABLE DESIGN

Author:
Abhiraj

8 months ago

2.9k
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).

Author:
rohit whyphy

8 months ago

1.1k
Active Beauty Main Page

Author:
Maxim

7 months ago

918

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components