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

273

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

152
Pricing table
Sleek and Modern Pricing Table with Hover Effects

Author:
Andreas Ludvigsson

1 year ago

2.2k
Pricing section
Pricing table with 3 cards for 3 plans

Author:
Leon Bachmann

2 years ago

10.5k
Toggle switch
toggle switch with smooth animation

Author:
Dika Rahman

1 year ago

3.2k
Neumorphic Toggle Switch

Author:
Anonymous

6 months ago

1k
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

1 year ago

6.9k
Pricing Section
Our pricing plan section with 3 packages

Author:
Emdadul Islam

1 year ago

2.5k
rating card

Author:
Anum Shahana

7 months ago

1.2k
Tailwind Customize Slider
Test how to customize slider with tailwind css

Author:
yinyinkyaw

11 months ago

1.8k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 weeks ago

310
Pricing cards for 3 plans

Author:
Laurits

2 years ago

9.2k
Pricing cards in pair

Author:
Nour Haider

2 years ago

12.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components