Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex

A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox.
Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project.
📱 100% Responsive
🎯 Easily customizable
💡 Ideal for client or personal projects

This tailwind example is contributed by Muhammad Umair Arshad, on 11-Apr-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans,Vote

Pricing Toggle switch Rating Range Slider

Author Muhammad Umair Arshad

Tailwind v3.4 1.4k 4

Fork Fullscreen

<div class="max-w-6xl mx-auto px-4 py-12">
  <div class="flex justify-between items-center mb-10">
    <h2 class="text-3xl font-bold">Choose your plan</h2>
    <div class="flex items-center space-x-2">
      <span class="text-sm font-medium">Monthly</span>
      <label class="relative inline-flex items-center cursor-pointer">
        <input type="checkbox" value="" class="sr-only peer">
        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500 dark:peer-focus:ring-blue-300 rounded-full peer dark:bg-gray-700 peer-checked:bg-blue-600"></div>
        <span class="absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all peer-checked:translate-x-full"></span>
      </label>
      <span class="text-sm font-medium">Yearly</span>
    </div>
  </div>

<div class="flex flex-col md:flex-row gap-6">
    
    <div class="flex-1 flex flex-col border rounded-2xl p-6 shadow-md">
      <h3 class="text-xl font-semibold mb-2">Basic</h3>
      <p class="text-gray-500 mb-4">For personal use and simple projects.</p>
      <div class="text-4xl font-bold mb-6">$15<span class="text-base font-normal text-gray-400">/mo</span></div>
      <ul class="flex-1 space-y-3 text-sm text-gray-600 mb-6">
        <li>✔ 5 Projects</li>
        <li>✔ Community Support</li>
        <li>✔ Email Access</li>
      </ul>
      <button class="mt-auto bg-blue-600 text-white py-2 rounded-xl hover:bg-blue-700 transition">Choose Plan</button>
    </div>

<div class="flex-1 flex flex-col border-2 border-blue-600 rounded-2xl p-6 shadow-lg bg-blue-50">
      <h3 class="text-xl font-semibold mb-2 text-blue-700">Pro</h3>
      <p class="text-gray-600 mb-4">Best for teams and freelancers.</p>
      <div class="text-4xl font-bold text-blue-700 mb-6">$39<span class="text-base font-normal text-blue-500">/mo</span></div>
      <ul class="flex-1 space-y-3 text-sm text-gray-700 mb-6">
        <li>✔ 25 Projects</li>
        <li>✔ Priority Support</li>
        <li>✔ Team Access</li>
      </ul>
      <button class="mt-auto bg-blue-700 text-white py-2 rounded-xl hover:bg-blue-800 transition">Choose Plan</button>
    </div>

<div class="flex-1 flex flex-col border rounded-2xl p-6 shadow-md">
      <h3 class="text-xl font-semibold mb-2">Enterprise</h3>
      <p class="text-gray-500 mb-4">For businesses with advanced needs.</p>
      <div class="text-4xl font-bold mb-6">$99<span class="text-base font-normal text-gray-400">/mo</span></div>
      <ul class="flex-1 space-y-3 text-sm text-gray-600 mb-6">
        <li>✔ Unlimited Projects</li>
        <li>✔ Dedicated Manager</li>
        <li>✔ Custom Solutions</li>
      </ul>
      <button class="mt-auto bg-blue-600 text-white py-2 rounded-xl hover:bg-blue-700 transition">Contact Sales</button>
    </div>
  </div>
</div>

Related Examples

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.

Hamza Atig

1 year ago

1.7k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

633
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

6 months ago

489
Responsive SaaS Pricing Cards with Monthly Yearly Toggle

JUGENDRA GANGWAR

2 months ago

115
Emoji rating

Brandon D

3 years ago

13.2k
Toggle button

Matthew Chen

3 years ago

13.4k
partql
partql

sh22gr

9 months ago

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

Andreas Wagner

3 years ago

15.5k
Review popup form with toggle and stars
Review popup form with toggle and stars

Ayman Reifoun

1 year ago

1.3k
Pricing card single

Manuela Bianka

1 year ago

1k
Pricing cards in pair

Anonymous

3 years ago

8.3k
Pricing
Looks better with in [Line-2] with: md:w-3/5

Matti

1 year ago

1.8k