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

327

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 months ago

158
Clean pricing cards

Author:
Freja Jensen

2 years ago

7.9k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Mehmet Kaplan

1 year ago

2.7k
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.9k
Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Author:
Elsabe Fourie

1 year ago

10.9k
Beautiful pricing cards design (5-cards grid)

Author:
Liam Moore

2 years ago

14.3k
PLAN SECTION

Author:
ABDO-SY

2 months ago

278
Interactive Pricing Cards
this are pricing cards

Author:
ishimwe shadad

1 month ago

53
Animated toggle switch

Author:
Samuel Dawson

2 years ago

14.9k
Pricing Card with Toggle

Author:
Paul Intay

6 months ago

894
Pricing table
Sleek and Modern Pricing Table with Hover Effects

Author:
Andreas Ludvigsson

1 year ago

2.2k
Card
Card

Author:
Aman kumar

1 year ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components