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.1k

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.8k
Clean pricing cards

Author:
Freja Jensen

2 years ago

7.6k
Pricing card

Author:
Piet Vriend

2 years ago

8k
Pricing cards

Author:
Freja Jensen

2 years ago

9k
Dropdown select on hover
this example does not uses javascript

Author:
Alok

1 year ago

26.1k
Basic pricing card

Author:
Sienna

2 years ago

10.8k
Pricing Cards
the component is designed to showcase and compare prices between different subscription plans.

Author:
Anonymous

1 year ago

6.3k
Subscription
Subscription list

Author:
Abhiraj

2 weeks ago

86
Pricing table

Author:
Laurits

2 years ago

9.7k
Multiple select input with alpine js
select input where you can select multiple items

Author:
Nomusa Botha

7 months ago

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

3 months ago

1.8k
Service Pricing Card
Cards including a call-to-action button for signing up

Author:
Paul Intay

1 year ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components