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 v3.4. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing Select Radio

Author Mehmet Kaplan

Tailwind v3.4 4.4k 7

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

Rafferty Kim

3 years ago

10.9k
Product Pricing Section
This component displays pricing plans for your product or service. It provides a clean and visually appealing layout for showcasing different pricing tiers with their respective features and prices.

Computer guy

3 years ago

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

Erik Hyatt

3 years ago

14.4k
Une structure simple et transparente. pricing
Une structure simple et transparente. pricing

Omer fils ELENGA

8 months ago

484
Pricing Plans
Js integrated Pricing Plans

ORGIN_DREAMS

1 year ago

1.4k
Price
Pricing

Jean Claude Nguetta

1 year ago

767
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

Muhammad Umair Arshad

1 year ago

1.4k
Clean pricing cards

Freja Jensen

3 years ago

8.9k
Search bar with filter options

Piet Vriend

3 years ago

26.5k
Pricing Table with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.1k
Minimal pricing card design

Anonymous

3 years ago

8.2k
Pricing section with tailwind css

Task Master

3 years ago

12.3k