Modern Responsive Pricing Section with Toggle

A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

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

Card Form Pricing Other Mockup

Author Hamza Atig

Tailwind v3.4 1.7k 3

Fork Fullscreen

<div class="max-w-6xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
    
    <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 text-center mb-8 md:mb-12">
      Design anything with the right plan
    </h1>

<div class="flex flex-col sm:flex-row justify-center items-center mb-10 gap-3">
      <div class="flex border border-gray-200 rounded-lg overflow-hidden p-0.5">
        <button class="px-5 py-1.5 text-sm font-medium bg-gray-100 text-gray-800 rounded-md focus:outline-none">Monthly</button>
        <button class="px-5 py-1.5 text-sm font-medium bg-white text-gray-500 hover:bg-gray-50 rounded-md focus:outline-none ml-1">Yearly</button>
      </div>
      <span class="text-sm text-blue-600 font-medium">Up to 33% off</span>
    </div>

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

<div class="bg-white rounded-lg p-6 lg:p-8 border border-gray-200 flex flex-col">
        <h2 class="text-xl font-semibold text-gray-900 mb-1">Free</h2>
        <p class="text-sm text-gray-600 mb-4 flex-grow min-h-[50px]">Start creating stunning designs with professional
          templates.</p>

<div class="mb-6">
          <span class="text-3xl lg:text-4xl font-bold text-gray-900">$0</span>
          <span class="text-sm text-gray-500">/ month</span>
          <p class="text-xs text-gray-500 mt-1">Free forever</p>
        </div>

<div>
          <h3 class="text-sm font-medium text-gray-800 mb-4">Features:</h3>
          <ul class="space-y-3 text-sm flex-grow">
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">5</span>
              projects</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">20 AI credits</span>
              (single-use)</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">0.5GB</span>
              file storage</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">10,000+</span>
              professional templates</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">1M+</span>
              photos, graphics and fonts</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">High-fidelity Mockups</span>
            </li>
          </ul>
        </div>
      </div>

<div class="bg-white rounded-lg p-6 lg:p-8 border border-gray-200 flex flex-col">
        <h2 class="text-xl font-semibold text-gray-900 mb-1">Pro</h2>
        <p class="text-sm text-gray-600 mb-4 flex-grow min-h-[50px]">Great for individuals who need access to vector
          files, advanced editing and AI tools.</p>

<div class="mb-6">
          <span class="text-3xl lg:text-4xl font-bold text-gray-900">$10</span>
          <span class="text-sm text-gray-500">/ month</span>
          <span class="text-xs bg-blue-100 text-blue-600 px-1.5 py-0.5 rounded-sm line-through ml-2">$15</span>
          <p class="text-xs text-gray-500 mt-1">Billed $120 annually</p>
        </div>

<div>
          <h3 class="text-sm font-medium text-gray-800 mb-4">Everything in Free and...</h3>
          <ul class="space-y-3 text-sm flex-grow">
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">50</span>
              projects</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">200 AI credits</span>
              per month</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">10GB</span>
              file storage</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Access to all Premium content</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">10M+</span>
              photos, graphics and fonts</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Advanced AI features</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">High-res vector exports</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Full commercial license</span>
            </li>
          </ul>
        </div>
      </div>

<div class="bg-white rounded-lg p-6 lg:p-8 border-2 recommended-border relative flex flex-col">
        
        <span class="absolute top-4 right-4 bg-blue-100 text-blue-700 text-xs font-bold px-2.5 py-0.5 rounded-full">RECOMMENDED</span>

<h2 class="text-xl font-semibold text-gray-900 mb-1">Expert</h2>
        <p class="text-sm text-gray-600 mb-4 flex-grow min-h-[50px]">For professionals that need even faster workflows
          and consistency in their designs.</p>

<div class="mb-6">
          <span class="text-3xl lg:text-4xl font-bold text-gray-900">$24</span>
          <span class="text-sm text-gray-500">/ month</span>
          <span class="text-xs bg-blue-100 text-blue-600 px-1.5 py-0.5 rounded-sm line-through ml-2">$30</span>
          <p class="text-xs text-gray-500 mt-1">Billed $288 annually</p>
        </div>

<a href="#"
          class="w-full block text-center bg-gray-900 hover:bg-gray-700 text-white py-2.5 rounded-lg font-semibold transition duration-200 mb-8">
          Get Expert
        </a>

<div>
          <h3 class="text-sm font-medium text-gray-800 mb-4">Everything in Pro and...</h3>
          <ul class="space-y-3 text-sm flex-grow">
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">Unlimited</span>
              projects</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">600 AI credits</span>
              per month</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">100GB</span>
              file storage</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Brand Kits</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">30 Image Gen Saved Styles</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Priority Customer Support</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Access to Beta features</span>
            </li>
          </ul>
        </div>
      </div>

</div>

<p class="text-xs text-gray-500 text-center mt-10">
      * The prices displayed are inclusive of Value Added Tax (VAT). Payments through credit and debit cards are
      acceptable.
    </p>

<div class="text-center mt-8">
      <a href="#"
        class="inline-block border border-gray-300 hover:bg-gray-100 text-gray-700 px-8 py-3 rounded-lg font-medium transition duration-200">
        Compare Plans
      </a>
    </div>

</div>

</body>

Related Examples

Pricing Table

Akshay

4 years ago

11.4k
Show credit card details

Manuela Bianka

3 years ago

13.2k
Glassmorphism form

Sophia Baker

3 years ago

19.3k
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
Glassmorphism form

Geoffrey Callaghan

2 years ago

7.5k
Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Md. Tofayel islam

2 years ago

3.8k
Advanced phone verification

Md. Tofayel islam

2 years ago

2.6k
Pricing card
Reveal details on hover

Anonymous

2 years ago

5.3k
cards
cards with background animation

Anonymous

2 years ago

3.8k