Home
Mehmet Kaplan
Pricing Plan Selector

Pricing Plan Selector

radio buttons for selecting a pricing plan

This tailwind example is contributed by Mehmet Kaplan, on 23-May-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing Select Radio

Author Mehmet Kaplan

2.9k

Fork Fullscreen

<label class="cursor-pointer">
        <input type="radio" class="peer sr-only" name="pricing" />
        <div class="w-72 max-w-xl rounded-md bg-white dark:bg-gray-900 p-5 text-gray-600 dark:text-gray-300 ring-2 ring-transparent transition-all hover:shadow peer-checked:text-sky-600 peer-checked:ring-blue-400 peer-checked:ring-offset-2">
            <div class="flex items-center justify-between">
              <p><span class="text-lg font-bold">%3</span> iskonto</p>
              <div class="text-sm font-bold">₺68.609,00</div>
            </div>
        </div>
      </label>

<label class="cursor-pointer">
        <input type="radio" class="peer sr-only" name="pricing" />
        <div class="w-72 max-w-xl rounded-md bg-white dark:bg-gray-900 p-5 text-gray-600 dark:text-gray-300 ring-2 ring-transparent transition-all hover:shadow peer-checked:text-sky-600 peer-checked:ring-blue-400 peer-checked:ring-offset-2">
            <div class="flex items-center justify-between">
              <p><span class="text-lg font-bold">%5</span> iskonto</p>
              <div class="text-sm font-bold">₺68.609,00</div>
            </div>
        </div>
      </label>

<label class="cursor-pointer">
        <input type="radio" class="peer sr-only" name="pricing" />
        <div class="w-72 max-w-xl rounded-md bg-white dark:bg-gray-900 p-5 text-gray-600 dark:text-gray-300 ring-2 ring-transparent transition-all hover:shadow peer-checked:text-sky-600 peer-checked:ring-blue-400 peer-checked:ring-offset-2">
            <div class="flex items-center justify-between">
              <p><span class="text-lg font-bold">%10</span> iskonto</p>
              <div class="text-sm font-bold">₺68.609,00</div>
            </div>
        </div>
      </label>

<button id="apply-discount" class="mt-4 px-4 py-2 bg-green-500 text-white rounded">İskonto Uygula ve Devam Et</button>
    </div>

</div>
  </div>
</div>

Related Examples

Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

1 year ago

9.6k
Pricing card

Author:
Task Master

2 years ago

8.6k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

9.9k
Fancy pricing card

Author:
Laurits

2 years ago

13.2k
3 pricing cards
Showcase your pricing structure effectively

Author:
magersa

1 year ago

3.1k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

4 months ago

1k
Tailwind CSS Radio Button Cards

Author:
Prashant

2 years ago

11.6k
Pricing Table

Author:
Akshay

2 years ago

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

Author:
VoltagedDev

10 months ago

1.7k
Pricing cards - with features list
Flexible Pricing Plans Cards

Author:
Anonymous

1 year ago

4k
Horizontal Pricing Card with gradient shadow

Author:
Prajwal Hallale

1 year ago

198
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

Author:
Muhammad Umair Arshad

3 months ago

329

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components