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

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

8.7k
Modern pricing cards
Minimal and clean pricing cards

Author:
Paul Intay

2 months ago

392
Dropdown select on hover
this example does not uses javascript

Author:
Alok

1 year ago

25.5k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Andreas Wagner

1 year ago

12.2k
Pricing Table

Author:
Akshay

2 years ago

9.8k
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:
Maxim

2 months ago

1.5k
Pricing card

Author:
Laurits

2 years ago

9.8k
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

9 months ago

1.9k
Yes / No radio input with reset button

Author:
Kris Showen

1 year ago

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

9.4k
Services
explore our awesome Services

Author:
ابراهيم سيد

9 months ago

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

Author:
Andreas Ludvigsson

11 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components