Home
Paul Intay
Pricing Card with Toggle

Pricing Card with Toggle

This tailwind example is contributed by Paul Intay, on 14-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Paul Intay

901

Fork Fullscreen

<div class="py-12">
  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
    <div class="md:flex">
      <div class="md:shrink-0">
        <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://images.unsplash.com/photo-1515705576963-95cad62945b6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80" alt="Man looking at item at a store">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Basic Plan</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Best for small
          teams</a>
        <p class="mt-2 text-slate-500">Includes all the core features, up to 5 users, and email support.</p>

<div class="mt-6 flex items-center">
          <span class="text-slate-600 mr-3">Monthly</span>
          <label for="toggle" class="flex items-center cursor-pointer">
            <div class="relative">
              <input type="checkbox" id="toggle" class="sr-only peer" />
              <div class="block bg-slate-300 w-14 h-8 rounded-full transition-all duration-300 peer-checked:bg-indigo-500"></div>
              <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition-all duration-300 peer-checked:translate-x-6"></div>
            </div>
          </label>
          <span class="text-slate-600 ml-3">Yearly</span>
        </div>

<div class="mt-4 monthly-price">
          <span class="text-3xl font-bold text-slate-900">$29</span>
          <span class="text-slate-500">/mo</span>
        </div>

<div class="mt-4 yearly-price hidden">
          <span class="text-3xl font-bold text-slate-900">$290</span>
          <span class="text-slate-500">/yr</span>
        </div>

<button class="mt-8 w-full bg-indigo-500 text-white py-2 px-4 rounded-md hover:bg-indigo-600 transition-colors duration-200">
          Choose Plan
        </button>
      </div>
    </div>
  </div>
</div>

toggle.addEventListener('change', () => {
    monthlyPrice.classList.toggle('hidden');
    yearlyPrice.classList.toggle('hidden');
  });
</script>

Related Examples

Simple yet stylish pricing table

Author:
Laurits

2 years ago

8.4k
Payment form

Author:
ORGIN_DREAMS

2 months ago

146
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

455
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

4 months ago

719
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

1 month ago

143
Pricing cards - with features list
Flexible Pricing Plans Cards

Author:
Anonymous

1 year ago

4k
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

11k
Fancy pricing card

Author:
Laurits

2 years ago

13.3k
Pricing Card

Author:
Anonymous

9 months ago

1.2k
Product / Service pricing section

Author:
Sophia Baker

2 years ago

12.2k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

3 months ago

656
Horizontal Pricing Card

Author:
Mereani Waqa

1 year ago

5.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components