Home
Muhammad Umair Arshad
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex

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 CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans,Vote

Pricing Toggle switch Rating Range Slider

Author Muhammad Umair Arshad

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.

Author:
Hamza Atig

1 week ago

28
Pricing card

Author:
Piet Vriend

2 years ago

8.3k
Basic pricing card

Author:
Sienna

2 years ago

10.2k
Pricing cards

Author:
Freja Jensen

2 years ago

9.1k
rating card

Author:
Anum Shahana

5 months ago

994
Pricing cards in pair

Author:
Santiago Hernandez

11 months ago

1.5k
Show total ratings

Author:
Piet Vriend

2 years ago

9.6k
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

2 months ago

522
Pricing section

Author:
Leon Bachmann

2 years ago

11.5k
Fancy pricing card

Author:
Laurits

2 years ago

12.7k
Minimalist Pricing Section
A minimal but nice pricing section.

Author:
VoltagedDev

8 months ago

1.6k
Rating stars

Author:
Bunny

2 years ago

12.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components