Configurable 3-Tier Responsive Pricing Table

A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

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,Vote,simulation,copy,dummy,miniature,like

Card Pricing Table Toggle switch Other Rating Mockup

Author Hamza Atig

Tailwind v3.4 1.6k 5

Fork Fullscreen

.border-custom-purple {
    border-color: #8C30F5;
  }

.bg-custom-gray-light {
    background-color: #F7F7F7;
  }
  .bg-custom-gray {
    background-color: #6B7280;
  }
  .bg-custom-gray-dark {
    background-color: #4B5563;
  }
</style>

<div class="flex flex-col lg:flex-row justify-between items-start lg:items-center mb-8 gap-6">
        <h2 class="text-2xl md:text-3xl font-semibold text-gray-800">Calculate for your team</h2>

<div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full lg:w-auto">
            
            <div class="w-full sm:w-auto">
                <label class="block text-sm font-medium text-gray-600 mb-1">How many people?</label>
                <div class="flex items-center bg-white rounded-lg border border-gray-300 px-3 py-1.5">
                    <input type="number" value="1" class="w-12 text-center font-medium border-none outline-none focus:ring-0 p-0">
                    <span class="text-sm text-gray-700 ml-2">People</span>
                </div>
            </div>

<div class="w-full sm:w-auto">
                 <span class="block text-sm font-medium text-green-600 mb-1 text-left sm:text-right">Save from 16% with yearly</span>
                 <div class="flex rounded-lg border border-gray-300 overflow-hidden w-full sm:w-auto">
                    <button class="flex-1 sm:flex-none px-5 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-100 focus:outline-none">Monthly</button>
                    <button class="flex-1 sm:flex-none px-5 py-2 text-sm font-medium bg-custom-purple text-white focus:outline-none">Yearly</button>
                </div>
            </div>
        </div>
    </div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

<div class="bg-custom-gray-light rounded-lg p-6 flex flex-col">
            <div class="flex justify-between items-center mb-3">
                <span class="text-xs bg-gray-200 text-gray-700 px-2 py-0.5 rounded-full font-medium">For one person</span>
                
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-1">Basic Plan</h3>
            <p class="text-sm text-gray-600 mb-4 flex-grow min-h-[40px]">Design anything and bring your ideas to life. No cost, just creativity.</p>

<div class="mb-6">
                <p class="text-3xl font-bold text-gray-900">US$0</p>
                <p class="text-xs text-gray-500">/year for one person</p>
            </div>

<a href="#" class="w-full block text-center bg-custom-gray hover:bg-custom-gray-dark text-white py-3 rounded-lg font-semibold transition duration-200 mb-6">
                Get started
            </a>

<div class="border-t border-gray-200 pt-6">
                 <h4 class="text-sm font-medium text-gray-800 mb-3">Features you'll love:</h4>
                 <ul class="space-y-2 text-sm flex-grow">
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Feature A for basic tasks</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Standard Template Library (2M+)</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Common Design Types Included</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Access to Stock Photos (4M+)</span></li>
                    <li class="flex items-start"><i class="fas fa-info-circle text-gray-400 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Limited AI Creative Partner*</span></li>
                    <li class="flex items-start"><i class="fas fa-info-circle text-gray-400 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Basic Interactive Designs**</span></li>
                    <li class="flex items-start"><i class="fas fa-info-circle text-gray-400 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Standard Export Formats*</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Standard Print Options</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">5GB of Cloud Storage</span></li>
                 </ul>
            </div>
        </div>

<div class="bg-custom-purple-light rounded-lg p-6 flex flex-col">
             <div class="flex justify-between items-center mb-3">
                <span class="text-xs bg-purple-200 text-purple-800 px-2 py-0.5 rounded-full font-medium">For one person</span>
                <i class="fas fa-crown text-yellow-500"></i> 
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-1">Pro Plan</h3>
            <p class="text-sm text-gray-600 mb-4 flex-grow min-h-[40px]">Unlock premium content, more powerful design tools, and AI features.</p>

<div class="mb-6">
                <p class="text-3xl font-bold text-gray-900">US$55</p>
                <p class="text-xs text-gray-500">/year for one person</p>
            </div>

<a href="#" class="w-full block text-center bg-custom-purple hover:bg-custom-purple-dark text-white py-3 rounded-lg font-semibold transition duration-200 mb-6">
                Start a free trial
            </a>

<div class="border-t border-purple-200 pt-6">
                 <h4 class="text-sm font-medium text-gray-800 mb-3">Everything in Basic, plus:</h4>
                 <ul class="space-y-2 text-sm flex-grow">
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Unlimited access to premium templates</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Extensive Media Library (140M+)</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Brand Kit Management (1000 Kits)</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Quick Resize & Translate</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Remove Backgrounds Easily</span></li>
                    <li class="flex items-start"><i class="fas fa-info-circle text-gray-400 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Advanced Creation/Resize Tools*</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Boost creativity with 20+ AI tools^</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Plan and schedule social content</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">1TB of cloud storage</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Online customer support</span></li>
                 </ul>
            </div>
        </div>

<div class="bg-custom-purple-light rounded-lg p-6 flex flex-col">
            <div class="flex justify-between items-center mb-3">
                <span class="text-xs bg-purple-200 text-purple-800 px-2 py-0.5 rounded-full font-medium">For your team</span>
                 <i class="fas fa-crown text-yellow-500"></i> 
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-1">Teams Plan</h3>
            <p class="text-sm text-gray-600 mb-4 flex-grow min-h-[40px]">Transform teamwork, grow your brand, and simplify workflows.</p>

<div class="mb-6">
                <p class="text-3xl font-bold text-gray-900">US$50</p>
                <p class="text-xs text-gray-500">/year per person<br>Minimum 3 people (US$150/year)</p>
            </div>

<a href="#" class="w-full block text-center bg-custom-purple hover:bg-custom-purple-dark text-white py-3 rounded-lg font-semibold transition duration-200 mb-2">
                Start a free trial
            </a>
            <a href="#" class="w-full block text-center text-sm text-custom-purple hover:underline py-2 mb-4">
                Contact Sales
            </a>

<div class="border-t border-purple-200 pt-6">
                 <h4 class="text-sm font-medium text-gray-800 mb-3">Everything in Pro, plus:</h4>
                 <ul class="space-y-2 text-sm flex-grow">
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Scale your brand and centralize assets</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Ensure brand consistency with approvals</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Edit, comment, and collaborate in real time</span></li>
                    <li class="flex items-start"><i class="fas fa-info-circle text-gray-400 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Generate on-brand text and visual assets with AI^</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Team reports and insights</span></li>
                    <li class="flex items-start"><i class="fas fa-info-circle text-gray-400 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Import and sync data from external sources*</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">AI admin controls</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">ISO 27001 certification and SOC 2 Type II</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">1TB of cloud storage per person</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Pay as you grow options</span></li>
                    <li class="flex items-start"><i class="fas fa-check text-purple-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Online customer support</span></li>
                 </ul>
            </div>
        </div>

</div>

<div class="text-center mt-8">
        <p class="text-xs text-gray-500">*Usage limits and AI-powered design tools vary between plans. ^New features coming soon.</p>
        <p class="text-xs text-gray-500 mt-2"><i class="fas fa-info-circle text-gray-400 mr-1"></i> Educational organizations and not-for-profits can enjoy premium features for free.</p>
    </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 card
basic pricing card with single price

Amit Pachange

3 years ago

11.3k
multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
cards
cards with background animation

Anonymous

3 years ago

11.9k
cards
cards with background animation

Anonymous

3 years ago

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

Andreas Wagner

2 years ago

15.4k
Pricing card
Reveal details on hover

Anonymous

2 years ago

5.3k
cards
cards with background animation

Anonymous

2 years ago

3.8k
Card
Card

Aman kumar

2 years ago

3k
Card
Card

Aman kumar

2 years ago

2.2k
Invoice
Invoice

Ameth Galarcio

2 years ago

3.4k