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

3.5k

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

2 years ago

10.1k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

8 months ago

1.3k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

10.5k
Super input radio card
card input radio simple input card input design awesome card design rounded black shadow blue border gray icon card radio option HTML CSS select JavaScript dropdown

Author:
ROHIT RAJPUT

1 year ago

1.7k
Pricing cards in pair

Author:
Anonymous

2 years ago

7.4k
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

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

Author:
VoltagedDev

1 year ago

2.4k
Pricing card single

Author:
Manuela Bianka

7 months ago

490
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

2.1k
Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Author:
Erik Hyatt

2 years ago

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

8 months ago

697
Modern pricing cards
Minimal and clean pricing cards

Author:
Paul Intay

1 year ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components