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

111

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

2 weeks ago

37
Clean pricing cards

Author:
Santiago Hernandez

1 year ago

1.9k
Heart Shaped Rating Section

Author:
Gopi Yadav

2 years ago

12.5k
PLAN SECTION

Author:
ABDO-SY

3 weeks ago

31
Range Slider
Also, shows the current value of the slider while it is being slid

Author:
Nikolai

1 year ago

5k
Toggle switch
toggle switch with smooth animation

Author:
Dika Rahman

1 year ago

2.9k
Pricing card

Author:
Sophia Baker

2 years ago

7.9k
Pricing table with 2 columns

Author:
Piet Vriend

2 years ago

12.1k
Pricing Card with gradient background
A sleek and transparent card displaying your product's pricing. It's designed to be both visually appealing and informative, helping users understand your pricing options at a glance.

Author:
Computer guy

1 year ago

7.8k
Pricing table
Sleek and Modern Pricing Table with Hover Effects

Author:
Andreas Ludvigsson

1 year ago

2k
Card Slider

Author:
Maxim

1 month ago

426
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

5 days ago

40

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components