Tailwind CSS Pricing Sections

Explore this collection of versatile pricing sections built with Tailwind CSS. Designed for easy integration, these components offer clean layouts and responsive designs suitable for various web applications.

Each example includes a preview and readily copyable HTML code. Simply choose the style that fits your needs, copy the code, and adapt it to your project's specific requirements and design system.

Minimal Pricing Card

Basic Plan

$9/mo

Perfect for individuals starting out.

<!-- Minimal Pricing Card -->
<div class="max-w-xs mx-auto bg-white rounded-lg shadow-md overflow-hidden">
    <div class="px-6 py-8">
        <h3 class="text-center text-lg font-medium text-gray-800 uppercase">Basic Plan</h3>
        <p class="text-center text-4xl font-bold text-gray-800 mt-4">$9<span class="text-base font-medium text-gray-500">/mo</span></p>
        <p class="text-center text-sm text-gray-600 mt-4">Perfect for individuals starting out.</p>
    </div>
</div>

Pricing with CTA Button

Pro Plan

$29/mo

Ideal for small teams and growing businesses.

<!-- Pricing with CTA Button -->
<div class="max-w-xs mx-auto bg-white rounded-lg shadow-md overflow-hidden">
    <div class="px-6 py-8">
        <h3 class="text-center text-lg font-medium text-gray-800 uppercase">Pro Plan</h3>
        <p class="text-center text-4xl font-bold text-gray-800 mt-4">$29<span class="text-base font-medium text-gray-500">/mo</span></p>
        <p class="text-center text-sm text-gray-600 mt-4">Ideal for small teams and growing businesses.</p>
    </div>
    <div class="px-6 pb-8">
         <button class="w-full bg-blue-600 text-white text-sm font-medium py-3 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
            Get Started
        </button>
    </div>
</div>

Pricing with Icons

Enterprise

$99/mo

For large organizations needing advanced features.

<!-- Pricing with Icons -->
<div class="max-w-xs mx-auto bg-white rounded-lg shadow-md overflow-hidden">
    <div class="px-6 py-8">
         <div class="flex items-center justify-center mb-5">
            <!-- Example Heroicon: Cube -->
            <svg class="w-10 h-10 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9.75l-9-5.25M12 12.75l9-5.25" />
            </svg>
         </div>
        <h3 class="text-center text-lg font-medium text-gray-800 uppercase">Enterprise</h3>
        <p class="text-center text-4xl font-bold text-gray-800 mt-4">$99<span class="text-base font-medium text-gray-500">/mo</span></p>
        <p class="text-center text-sm text-gray-600 mt-4">For large organizations needing advanced features.</p>
    </div>
    <div class="bg-gray-50 px-6 py-4">
         <button class="w-full bg-gray-800 text-white text-sm font-medium py-3 px-4 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-150 ease-in-out">
            Contact Sales
        </button>
    </div>
</div>

Pricing with Feature Checklist

Premium Plan

$49/mo

Pricing with Info Icons (Tooltip Placeholder)

Standard Plan

$19/mo

Core Features Includes A, B, and C.
5 GB Storage Total cloud storage space.
Email Support

<!-- Pricing with Info Icons (Simple CSS Tooltip) -->
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden">
    <div class="px-6 py-8">
        <h3 class="text-center text-lg font-medium text-gray-800 uppercase">Standard Plan</h3>
        <p class="text-center text-4xl font-bold text-gray-800 mt-4">$19<span class="text-base font-medium text-gray-500">/mo</span></p>
        <div class="mt-8">
            <ul class="space-y-3 text-sm text-gray-700">
                <li class="flex items-center justify-between">
                    <span>Core Features</span>
                    <!-- Tooltip Trigger -->
                    <span class="relative group">
                        <!-- Info Icon -->
                        <svg class="w-4 h-4 text-gray-400 cursor-help" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                        </svg>
                        <!-- Tooltip Content (hidden by default, shown on group-hover) -->
                        <span class="absolute hidden group-hover:block bg-gray-700 text-white text-xs rounded py-1 px-2 -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap z-10">
                            Includes A, B, and C.
                        </span>
                    </span>
                </li>
                 <li class="flex items-center justify-between">
                    <span>5 GB Storage</span>
                     <span class="relative group">
                        <svg class="w-4 h-4 text-gray-400 cursor-help" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                        </svg>
                         <span class="absolute hidden group-hover:block bg-gray-700 text-white text-xs rounded py-1 px-2 -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap z-10">
                            Total cloud storage space.
                        </span>
                    </span>
                </li>
                 <li class="flex items-center">
                    <span>Email Support</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="px-6 pb-8 mt-auto">
         <button class="w-full border border-blue-600 text-blue-600 text-sm font-medium py-3 px-4 rounded-md hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
            Select Plan
        </button>
    </div>
</div>

Pricing with Animation (Hover/Transition)

Hover over the card to see the effect.

Growth Plan

$39/mo

Feature A
Feature B
Feature C

<!-- Pricing with Animation (Hover/Transition) -->
<!-- Add 'transition duration-300 ease-in-out hover:shadow-xl hover:scale-105' to the main card div -->
<div class="max-w-xs mx-auto bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out hover:shadow-xl hover:scale-105">
    <div class="px-6 py-8">
        <h3 class="text-center text-lg font-medium text-gray-800 uppercase">Growth Plan</h3>
        <p class="text-center text-4xl font-bold text-gray-800 mt-4">$39<span class="text-base font-medium text-gray-500">/mo</span></p>
         <ul class="mt-6 space-y-2 text-sm text-center text-gray-600">
            <li>Feature A</li>
            <li>Feature B</li>
            <li>Feature C</li>
         </ul>
    </div>
    <div class="px-6 pb-8">
         <button class="w-full bg-blue-600 text-white text-sm font-medium py-3 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
            Upgrade Now
        </button>
    </div>
</div>

Responsive Pricing Layout (Grid)

Layout adjusts based on screen size (1 column small, 3 columns medium+).

Basic

$9/mo

1 Project
Basic Support

Popular

Pro

$29/mo

10 Projects
Priority Support
Advanced Features

Enterprise

$99/mo

Unlimited Projects
Dedicated Support
Custom Integrations

<!-- Responsive Pricing Layout (Grid) -->
<!-- Uses 'grid grid-cols-1 md:grid-cols-3 gap-8' for responsiveness -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">

    <!-- Card 1: Basic -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col">
        <div class="px-6 py-8 flex-grow">
            <h3 class="text-center text-lg font-medium text-gray-800 uppercase">Basic</h3>
            <p class="text-center text-4xl font-bold text-gray-800 mt-4">$9<span class="text-base font-medium text-gray-500">/mo</span></p>
            <ul class="mt-6 space-y-2 text-sm text-center text-gray-600">
                <li>1 Project</li>
                <li>Basic Support</li>
            </ul>
        </div>
        <div class="px-6 pb-8 mt-auto">
            <button class="w-full border border-blue-600 text-blue-600 text-sm font-medium py-3 px-4 rounded-md hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">Select</button>
        </div>
    </div>

     <!-- Card 2: Pro (Highlighted) -->
    <div class="bg-white rounded-lg shadow-lg overflow-hidden border-2 border-blue-500 flex flex-col relative">
         <span class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-bl-lg">Popular</span>
        <div class="px-6 py-8 flex-grow">
            <h3 class="text-center text-lg font-medium text-gray-800 uppercase">Pro</h3>
            <p class="text-center text-4xl font-bold text-gray-800 mt-4">$29<span class="text-base font-medium text-gray-500">/mo</span></p>
            <ul class="mt-6 space-y-2 text-sm text-center text-gray-600">
                <li>10 Projects</li>
                <li>Priority Support</li>
                <li>Advanced Features</li>
            </ul>
        </div>
        <div class="px-6 pb-8 mt-auto">
            <button class="w-full bg-blue-600 text-white text-sm font-medium py-3 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">Get Started</button>
        </div>
    </div>

     <!-- Card 3: Enterprise -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col">
        <div class="px-6 py-8 flex-grow">
            <h3 class="text-center text-lg font-medium text-gray-800 uppercase">Enterprise</h3>
            <p class="text-center text-4xl font-bold text-gray-800 mt-4">$99<span class="text-base font-medium text-gray-500">/mo</span></p>
            <ul class="mt-6 space-y-2 text-sm text-center text-gray-600">
                <li>Unlimited Projects</li>
                <li>Dedicated Support</li>
                <li>Custom Integrations</li>
            </ul>
        </div>
        <div class="px-6 pb-8 mt-auto">
            <button class="w-full border border-gray-600 text-gray-600 text-sm font-medium py-3 px-4 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-150 ease-in-out">Contact Us</button>
        </div>
    </div>

 </div>

Pricing with Free Trial Badge

14-Day Trial

Trial Plan

$0 for 14 days

Try all premium features, no credit card required.

<!-- Pricing with Free Trial Badge -->
<!-- Requires 'relative' on the card container and 'absolute' on the badge -->
<div class="max-w-xs mx-auto bg-white rounded-lg shadow-md overflow-hidden relative">
    <!-- Badge -->
    <!-- Adjust positioning (top/right/transform) and size (px/py) as needed -->
    <span class="absolute top-2 -right-10 transform rotate-45 bg-green-500 text-white text-xs font-semibold px-12 py-1 shadow-md">
        14-Day Trial
    </span>
    <div class="px-6 py-8">
        <h3 class="text-center text-lg font-medium text-gray-800 uppercase">Trial Plan</h3>
        <p class="text-center text-4xl font-bold text-gray-800 mt-4">$0<span class="text-base font-medium text-gray-500"> for 14 days</span></p>
        <p class="text-center text-sm text-gray-600 mt-4">Try all premium features, no credit card required.</p>
    </div>
    <div class="px-6 pb-8">
         <button class="w-full bg-green-600 text-white text-sm font-medium py-3 px-4 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150 ease-in-out">
            Start Free Trial
        </button>
    </div>
</div>

Side-by-Side Pricing Cards

Basic Plan

Ideal for individuals and starters.

$10/month

1 Project
10GB Storage
Basic Support

Choose Plan

Pro Plan

Perfect for small teams and growing businesses.

$25/month

10 Projects
100GB Storage
Priority Support
Team Collaboration

Choose Plan

<!-- Side-by-Side Pricing Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- Pricing Card 1 -->
    <div class="bg-white rounded-lg shadow-lg p-6 flex flex-col">
        <h3 class="text-xl font-semibold text-gray-800 mb-2">Basic Plan</h3>
        <p class="text-gray-600 mb-4">Ideal for individuals and starters.</p>
        <p class="text-4xl font-bold text-gray-900 mb-4">$10<span class="text-lg font-normal text-gray-500">/month</span></p>
        <ul class="space-y-2 text-gray-600 mb-6 flex-grow">
            <li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> 1 Project</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> 10GB Storage</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Basic Support</li>
        </ul>
        <a href="#" class="w-full text-center bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition duration-300">Choose Plan</a>
    </div>
    <!-- Pricing Card 2 -->
    <div class="bg-white rounded-lg shadow-lg p-6 flex flex-col">
        <h3 class="text-xl font-semibold text-gray-800 mb-2">Pro Plan</h3>
        <p class="text-gray-600 mb-4">Perfect for small teams and growing businesses.</p>
        <p class="text-4xl font-bold text-gray-900 mb-4">$25<span class="text-lg font-normal text-gray-500">/month</span></p>
        <ul class="space-y-2 text-gray-600 mb-6 flex-grow">
            <li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> 10 Projects</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> 100GB Storage</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Priority Support</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Team Collaboration</li>
        </ul>
        <a href="#" class="w-full text-center bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition duration-300">Choose Plan</a>
    </div>
</div>

Three-Tier Pricing Layout

Hobby

$19

per month

Best for personal use and side projects.

Up to 1,000 Visitors
Standard Analytics
Email Support

Choose Hobby

Popular

Growth

$49

per month

Ideal for growing businesses and startups.

Up to 10,000 Visitors
Advanced Analytics
API Access
Priority Email Support

Choose Growth

Scale

$99

per month

For established businesses and agencies.

Unlimited Visitors
Custom Analytics
API Access & Integrations
Dedicated Phone Support

Choose Scale

<!-- Three-Tier Pricing Layout -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
    <!-- Tier 1 -->
    <div class="bg-white rounded-lg shadow-md p-6 border border-gray-100 flex flex-col">
        <h3 class="text-lg font-semibold text-gray-500 mb-2 uppercase tracking-wider">Hobby</h3>
        <p class="text-3xl font-bold text-gray-900 mb-1">$19</p>
        <p class="text-gray-500 text-sm mb-4">per month</p>
        <p class="text-gray-600 text-sm mb-6 flex-grow">Best for personal use and side projects.</p>
        <ul class="space-y-2 text-sm text-gray-700 mb-6">
            <li class="flex items-center"><svg class="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Up to 1,000 Visitors</li>
            <li class="flex items-center"><svg class="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Standard Analytics</li>
            <li class="flex items-center"><svg class="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Email Support</li>
        </ul>
        <a href="#" class="w-full mt-auto text-center text-blue-600 border border-blue-600 py-2 px-4 rounded hover:bg-blue-50 transition duration-300 text-sm font-medium">Choose Hobby</a>
    </div>

     <!-- Tier 2 -->
    <div class="bg-white rounded-lg shadow-lg p-6 border-2 border-blue-500 flex flex-col relative">
         <span class="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wider">Popular</span>
        <h3 class="text-lg font-semibold text-gray-500 mb-2 uppercase tracking-wider mt-3">Growth</h3>
        <p class="text-3xl font-bold text-gray-900 mb-1">$49</p>
        <p class="text-gray-500 text-sm mb-4">per month</p>
        <p class="text-gray-600 text-sm mb-6 flex-grow">Ideal for growing businesses and startups.</p>
        <ul class="space-y-2 text-sm text-gray-700 mb-6">
            <li class="flex items-center"><svg class="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Up to 10,000 Visitors</li>
            <li class="flex items-center"><svg class="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Advanced Analytics</li>
            <li class="flex items-center"><svg class="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> API Access</li>
            <li class="flex items-center"><svg class="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Priority Email Support</li>
        </ul>
        <a href="#" class="w-full mt-auto text-center bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300 text-sm font-medium">Choose Growth</a>
    </div>

     <!-- Tier 3 -->
     <div class="bg-white rounded-lg shadow-md p-6 border border-gray-100 flex flex-col">
        <h3 class="text-lg font-semibold text-gray-500 mb-2 uppercase tracking-wider">Scale</h3>
        <p class="text-3xl font-bold text-gray-900 mb-1">$99</p>
        <p class="text-gray-500 text-sm mb-4">per month</p>
        <p class="text-gray-600 text-sm mb-6 flex-grow">For established businesses and agencies.</p>
        <ul class="space-y-2 text-sm text-gray-700 mb-6">
             <li class="flex items-center"><svg class="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Unlimited Visitors</li>
            <li class="flex items-center"><svg class="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Custom Analytics</li>
            <li class="flex items-center"><svg class="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> API Access & Integrations</li>
            <li class="flex items-center"><svg class="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Dedicated Phone Support</li>
        </ul>
        <a href="#" class="w-full mt-auto text-center text-blue-600 border border-blue-600 py-2 px-4 rounded hover:bg-blue-50 transition duration-300 text-sm font-medium">Choose Scale</a>
    </div>
</div>

Grid-Based Pricing Table

Feature

Basic

Pro (Popular)

Enterprise

Storage

10 GB

100 GB

1 TB

Users

1 User

Up to 5 Users

Unlimited Users

Support

Priority Email

Phone & Email

API Access

Price

$10/mo

$25/mo

$50/mo

Select

Select Pro

Select

<!-- Grid-Based Pricing Table -->
 <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <div class="grid grid-cols-4 divide-x divide-gray-200">
        <!-- Header Row -->
        <div class="p-4 font-semibold text-gray-700 bg-gray-50">Feature</div>
        <div class="p-4 text-center font-semibold text-gray-700 bg-gray-50">Basic</div>
        <div class="p-4 text-center font-semibold text-gray-700 bg-gray-50 border-l-2 border-r-2 border-blue-500">Pro (Popular)</div>
        <div class="p-4 text-center font-semibold text-gray-700 bg-gray-50">Enterprise</div>

        <!-- Feature Row 1 -->
        <div class="p-4 border-t border-gray-200 text-sm text-gray-600">Storage</div>
        <div class="p-4 border-t border-gray-200 text-center text-sm">10 GB</div>
        <div class="p-4 border-t border-gray-200 text-center text-sm font-medium text-blue-600 border-l-2 border-r-2 border-blue-500 bg-blue-50">100 GB</div>
        <div class="p-4 border-t border-gray-200 text-center text-sm">1 TB</div>

        <!-- Feature Row 2 -->
        <div class="p-4 border-t border-gray-200 text-sm text-gray-600">Users</div>
        <div class="p-4 border-t border-gray-200 text-center text-sm">1 User</div>
        <div class="p-4 border-t border-gray-200 text-center text-sm font-medium text-blue-600 border-l-2 border-r-2 border-blue-500 bg-blue-50">Up to 5 Users</div>
        <div class="p-4 border-t border-gray-200 text-center text-sm">Unlimited Users</div>

        <!-- Feature Row 3 -->
        <div class="p-4 border-t border-gray-200 text-sm text-gray-600">Support</div>
        <div class="p-4 border-t border-gray-200 text-center text-sm">Email</div>
        <div class="p-4 border-t border-gray-200 text-center text-sm font-medium text-blue-600 border-l-2 border-r-2 border-blue-500 bg-blue-50">Priority Email</div>
        <div class="p-4 border-t border-gray-200 text-center text-sm">Phone & Email</div>

         <!-- Feature Row 4 - Checkmarks -->
        <div class="p-4 border-t border-gray-200 text-sm text-gray-600">API Access</div>
        <div class="p-4 border-t border-gray-200 text-center text-sm flex justify-center items-center">
            <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </div>
        <div class="p-4 border-t border-gray-200 text-center text-sm font-medium text-blue-600 border-l-2 border-r-2 border-blue-500 bg-blue-50 flex justify-center items-center">
            <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        </div>
        <div class="p-4 border-t border-gray-200 text-center text-sm flex justify-center items-center">
             <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        </div>

        <!-- Pricing Row -->
        <div class="p-4 border-t border-gray-200 text-sm text-gray-600 font-semibold">Price</div>
        <div class="p-4 border-t border-gray-200 text-center text-sm font-semibold">$10/mo</div>
        <div class="p-4 border-t border-gray-200 text-center text-sm font-semibold text-blue-600 border-l-2 border-r-2 border-blue-500 bg-blue-50">$25/mo</div>
        <div class="p-4 border-t border-gray-200 text-center text-sm font-semibold">$50/mo</div>

         <!-- Button Row -->
        <div class="p-4 border-t border-gray-200 bg-gray-50"></div>
        <div class="p-4 border-t border-gray-200 text-center bg-gray-50">
            <a href="#" class="inline-block bg-gray-200 text-gray-700 py-2 px-4 rounded hover:bg-gray-300 transition duration-300 text-xs">Select</a>
        </div>
        <div class="p-4 border-t border-gray-200 text-center bg-blue-50 border-l-2 border-r-2 border-blue-500">
             <a href="#" class="inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300 text-xs font-semibold">Select Pro</a>
        </div>
        <div class="p-4 border-t border-gray-200 text-center bg-gray-50">
             <a href="#" class="inline-block bg-gray-200 text-gray-700 py-2 px-4 rounded hover:bg-gray-300 transition duration-300 text-xs">Select</a>
        </div>
    </div>
</div>

Pricing with Plan Badges

Freelancer

Basic

Great for starting out.

$29/mo

✔ 1 User
✔ 5 Projects
✔ 20GB Storage

Choose Plan

Startup

Popular

For growing teams.

$79/mo

✔ 5 Users
✔ Unlimited Projects
✔ 100GB Storage
✔ Priority Support

Choose Plan

Enterprise

Value

For large scale deployment.

$149/mo

✔ Unlimited Users
✔ Unlimited Projects
✔ 1TB Storage
✔ Dedicated Support
✔ Custom Features

Choose Plan

<!-- Pricing with Plan Badges -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Pricing Card 1 -->
    <div class="bg-white rounded-lg shadow-lg p-6 flex flex-col">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-xl font-semibold text-gray-800">Freelancer</h3>
            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">Basic</span>
        </div>
        <p class="text-gray-600 mb-4 text-sm">Great for starting out.</p>
        <p class="text-4xl font-bold text-gray-900 mb-4">$29<span class="text-lg font-normal text-gray-500">/mo</span></p>
        <ul class="space-y-2 text-gray-600 mb-6 flex-grow text-sm">
            <li><span class="text-green-500 mr-1">✔</span> 1 User</li>
            <li><span class="text-green-500 mr-1">✔</span> 5 Projects</li>
            <li><span class="text-green-500 mr-1">✔</span> 20GB Storage</li>
        </ul>
        <a href="#" class="w-full text-center bg-gray-800 text-white py-2 px-4 rounded-md hover:bg-gray-900 transition duration-300">Choose Plan</a>
    </div>
    <!-- Pricing Card 2 -->
     <div class="bg-white rounded-lg shadow-xl p-6 flex flex-col border-2 border-indigo-500">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-xl font-semibold text-gray-800">Startup</h3>
            <!-- Find more badge colors at https://tailwindcss.com/docs/customizing-colors#color-palette-reference -->
            <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-indigo-900 dark:text-indigo-300">Popular</span>
        </div>
        <p class="text-gray-600 mb-4 text-sm">For growing teams.</p>
        <p class="text-4xl font-bold text-gray-900 mb-4">$79<span class="text-lg font-normal text-gray-500">/mo</span></p>
        <ul class="space-y-2 text-gray-600 mb-6 flex-grow text-sm">
            <li><span class="text-green-500 mr-1">✔</span> 5 Users</li>
            <li><span class="text-green-500 mr-1">✔</span> Unlimited Projects</li>
            <li><span class="text-green-500 mr-1">✔</span> 100GB Storage</li>
            <li><span class="text-green-500 mr-1">✔</span> Priority Support</li>
        </ul>
        <a href="#" class="w-full text-center bg-indigo-500 text-white py-2 px-4 rounded-md hover:bg-indigo-600 transition duration-300">Choose Plan</a>
    </div>
    <!-- Pricing Card 3 -->
    <div class="bg-white rounded-lg shadow-lg p-6 flex flex-col">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-xl font-semibold text-gray-800">Enterprise</h3>
            <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Value</span>
        </div>
        <p class="text-gray-600 mb-4 text-sm">For large scale deployment.</p>
        <p class="text-4xl font-bold text-gray-900 mb-4">$149<span class="text-lg font-normal text-gray-500">/mo</span></p>
        <ul class="space-y-2 text-gray-600 mb-6 flex-grow text-sm">
             <li><span class="text-green-500 mr-1">✔</span> Unlimited Users</li>
            <li><span class="text-green-500 mr-1">✔</span> Unlimited Projects</li>
            <li><span class="text-green-500 mr-1">✔</span> 1TB Storage</li>
            <li><span class="text-green-500 mr-1">✔</span> Dedicated Support</li>
            <li><span class="text-green-500 mr-1">✔</span> Custom Features</li>
        </ul>
        <a href="#" class="w-full text-center bg-gray-800 text-white py-2 px-4 rounded-md hover:bg-gray-900 transition duration-300">Choose Plan</a>
    </div>
</div>

FAQ on Tailwind CSS Pricing Sections

How do I create responsive pricing tables with Tailwind CSS?

Creating responsive pricing tables with Tailwind CSS requires using the utility-first approach. Start with grid or flex layouts (grid grid-cols-1 md:grid-cols-3), then add padding and spacing classes. Use Tailwind's breakpoint prefixes (sm:, md:, lg:) to adjust the layout at different screen sizes. Many frontend developers leverage Tailwind UI marketplace components as starting points for their pricing sections.

Can I implement dark mode for my pricing section?

Yes! Tailwind CSS makes implementing dark mode pricing tables straightforward. Use the dark: prefix with your color utilities (like dark:bg-gray-800 dark:text-white). Enable dark mode in your tailwind.config.js file. CodePen examples showcase numerous approaches to create elegant dark mode pricing sections that maintain excellent UI/UX pricing elements.

What's the best way to create pricing toggles between monthly and annual plans?

Pricing toggles are best implemented using a combination of Tailwind CSS and JavaScript (often Alpine.js pricing toggles). Structure your HTML with hidden classes (hidden), then use JavaScript to toggle visibility. GitHub repositories contain numerous examples of subscription pricing implementations. This approach creates conversion-focused SaaS pricing sections.

Are there free Tailwind pricing templates available?

Several free Tailwind pricing templates exist across the web. Check CSS-Tricks tutorials, Tailwind CSS documentation, and component libraries. Dribbble designs often inspire these templates, while React pricing components are available through npm packages. Free options range from basic pricing cards to complete pricing grid Tailwind implementations.

How do I highlight a recommended pricing tier?

To highlight a recommended pricing tier in your pricing component libraries:

Use a different background color (bg-primary-100)
Add a border (border-2 border-primary-500)
Increase scale slightly (transform scale-105)
Add a banner or label (absolute -top-4)

This technique is popular in modern pricing sections designed by UI/UX designers.

Can Tailwind CSS pricing sections integrate with React frameworks?

Absolutely. Tailwind CSS works seamlessly with React frameworks. Install Tailwind as a dependency, configure postcss, and start building. Many frontend development tools support this workflow. React pricing components benefit from Tailwind's utility classes for styling while maintaining component architecture. Stack Overflow questions frequently address specific integration challenges.

How do I add animations to pricing section elements?

Add animations to pricing section elements using Tailwind's built-in transition utilities. Apply transition-all duration-300 alongside hover states like hover:transform hover:scale-105. For more complex animations, extend Tailwind's config. YouTube tutorials from Adam Wathan often demonstrate these techniques for building interactive custom pricing UI components.

What's the performance impact of using Tailwind for pricing sections?

When properly configured, Tailwind CSS has minimal performance impact on pricing sections. The JIT compiler pricing components only generate CSS for classes you actually use. This approach to atomic CSS creates small production bundles. Tailwind Labs continually optimizes the framework for performance across various pricing page optimization scenarios.

How do I create tiered feature lists in pricing cards?

Create tiered feature lists in pricing cards using:

<ul class="space-y-2"> <li class="flex items-center"> <svg class="h-5 w-5 text-green-500"><path d="..."/></svg> <span class="ml-2">Feature description</span> </li> </ul>

This pattern appears frequently in Tailwind pricing examples and CSS pricing modules from professional web design agencies.

How can I make pricing sections match my brand colors?

Customize Tailwind CSS pricing layouts to match brand colors by extending the tailwind.config.js file. Add your brand colors to the theme colors section. Use these custom colors in your classes (bg-brand-500, text-brand-900). This works perfectly for both Shopify templates and WordPress themes that require consistent branding across pricing section implementation.