Home
Rafferty Kim
Pricing Plan Selector

Pricing Plan Selector

radio buttons for selecting a pricing plan

This tailwind example is contributed by Rafferty Kim, on 21-Sep-2023. 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 Rafferty Kim

9.5k

Fork Fullscreen

<div class="flex min-h-screen items-center justify-center bg-slate-200 dark:bg-gray-800">
  <div class="mx-auto max-w-6xl px-12">
    <div class="flex flex-wrap justify-center gap-3">
      <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 flex-col gap-1">
            <div class="flex items-center justify-between">
              <p class="text-sm font-semibold uppercase text-gray-500 dark:text-gray-400">essential</p>
              <div>
                <svg class="text-gray-500 dark:text-gray-400" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m10.6 13.8l-2.175-2.175q-.275-.275-.675-.275t-.7.3q-.275.275-.275.7q0 .425.275.7L9.9 15.9q.275.275.7.275q.425 0 .7-.275l5.675-5.675q.275-.275.275-.675t-.3-.7q-.275-.275-.7-.275q-.425 0-.7.275ZM12 22q-2.075 0-3.9-.788q-1.825-.787-3.175-2.137q-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175q1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138q1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175q-1.35 1.35-3.175 2.137Q14.075 22 12 22Z" /></svg>
              </div>
            </div>
            <div class="flex items-end justify-between">
              <p><span class="text-lg font-bold">12 GB</span> of storage</p>
              <p class="text-sm font-bold">$12 / mo</p>
            </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 flex-col gap-1">
            <div class="flex items-center justify-between">
              <p class="text-sm font-semibold uppercase text-gray-500 dark:text-gray-400">pro</p>
              <div>
                <svg class="text-gray-500 dark:text-gray-400" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m10.6 13.8l-2.175-2.175q-.275-.275-.675-.275t-.7.3q-.275.275-.275.7q0 .425.275.7L9.9 15.9q.275.275.7.275q.425 0 .7-.275l5.675-5.675q.275-.275.275-.675t-.3-.7q-.275-.275-.7-.275q-.425 0-.7.275ZM12 22q-2.075 0-3.9-.788q-1.825-.787-3.175-2.137q-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175q1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138q1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175q-1.35 1.35-3.175 2.137Q14.075 22 12 22Z" /></svg>
              </div>
            </div>
            <div class="flex items-end justify-between">
              <p><span class="text-lg font-bold">50 GB</span> of storage</p>
              <p class="text-sm font-bold">$21 / mo</p>
            </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 flex-col gap-1">
            <div class="flex items-center justify-between">
              <p class="text-sm font-semibold uppercase text-gray-500 dark:text-gray-400">premium</p>
              <div>
                <svg class="text-gray-500 dark:text-gray-400" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m10.6 13.8l-2.175-2.175q-.275-.275-.675-.275t-.7.3q-.275.275-.275.7q0 .425.275.7L9.9 15.9q.275.275.7.275q.425 0 .7-.275l5.675-5.675q.275-.275.275-.675t-.3-.7q-.275-.275-.7-.275q-.425 0-.7.275ZM12 22q-2.075 0-3.9-.788q-1.825-.787-3.175-2.137q-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175q1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138q1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175q-1.35 1.35-3.175 2.137Q14.075 22 12 22Z" /></svg>
              </div>
            </div>
            <div class="flex items-end justify-between">
              <p><span class="text-lg font-bold">100 GB</span> of storage</p>
              <p class="text-sm font-bold">$49 / mo</p>
            </div>
          </div>
        </div>
      </label>
    </div>
  </div>
</div>

Related Examples

Radio Buttons
Users can click anywhere on the input field to select the radio option

Author:
Prajwal Hallale

2 years ago

16.7k
Pricing cards in pair

Author:
Nour Haider

2 years ago

13k
Pricing section
Service/product pricing section

Author:
Sophia Baker

2 years ago

12.1k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

9.9k
Radio Button Group for Search Filters
set of radio buttons grouped for selecting different search filters

Author:
Prajwal Hallale

1 year ago

5.3k
Pricing card for subscription

Author:
Task Master

2 years ago

10.7k
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.4k
Fancy pricing card

Author:
Laurits

2 years ago

13.2k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Mehmet Kaplan

1 year ago

2.7k
Search bar with filter options

Author:
Piet Vriend

2 years ago

24.6k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

2 months ago

190
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

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components