Home
Prashant
Tailwind CSS Radio Button Cards

Tailwind CSS Radio Button Cards

This tailwind example is contributed by Prashant, on 05-Sep-2022. Component is made with Tailwind CSS v3.

11.6k

<form class="grid grid-cols-3 gap-2 w-full max-w-screen-sm">
		<div>
			<input class="hidden" id="radio_1" type="radio" name="radio" checked>
			<label class="flex flex-col p-4 border-2 border-gray-400 cursor-pointer" for="radio_1">
				<span class="text-xs font-semibold uppercase">Small</span>
				<span class="text-xl font-bold mt-2">$10/mo</span>
				<ul class="text-sm mt-2">
					<li>Thing 1</li>
					<li>Thing 2</li>
				</ul>
			</label>
		</div>
		<div>
			<input class="hidden" id="radio_2" type="radio" name="radio">
			<label class="flex flex-col p-4 border-2 border-gray-400 cursor-pointer" for="radio_2">
				<span class="text-xs font-semibold uppercase">Medium</span>
				<span class="text-xl font-bold mt-2">$40/mo</span>
				<ul class="text-sm mt-2">
					<li>Thing 1</li>
					<li>Thing 2</li>
				</ul>
			</label>
		</div>
		<div>
			<input class="hidden" id="radio_3" type="radio" name="radio">
			<label class="flex flex-col p-4 border-2 border-gray-400 cursor-pointer" for="radio_3">
				<span class="text-xs font-semibold uppercase">Big</span>
				<span class="text-xl font-bold mt-2">$100/mo</span>
				<ul class="text-sm mt-2">
					<li>Thing 1</li>
					<li>Thing 2</li>
				</ul>
			</label>
		</div>
	</form>

</div>

Related Examples

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

Author:
Prajwal Hallale

3 years ago

16.7k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

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

Author:
Prajwal Hallale

1 year ago

5.4k
Survey form
User survey form

Author:
JaxStone

2 years ago

15.9k
Upload file input field

Author:
Gopi Yadav

2 years ago

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

8 months ago

1.2k
Sign Up form with dark mode support

Author:
Anonymous

1 year ago

11.3k
pricing slider with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.3k
Accordion block
FAQ accordion component, featuring expandable sections with smooth transitions and a clean, modern design

Author:
Maxim

8 months ago

1.3k
Responsive Bank Card Information Form with TailwindCSS
A sleek and modern bank card information form built with raw HTML and styled using TailwindCSS. This responsive form includes fields for cardholder name, card number, expiry date, and CVV, designed for clean aesthetics and ease of use.

Author:
SHARIFUL ISLAM

5 months ago

832
Simple Form 2

Author:
Mr Robot

2 years ago

10.1k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components