Radio Button Generator

Preview

Output format

Tailwind

1<div class="flex flex-col gap-[10px]">
2  <label class="flex items-center gap-2 cursor-pointer">
3    <div class="relative flex items-center justify-center">
4      <input type="radio" name="radioGroup" class="sr-only peer" checked/>
5      <div class="w-[20px] h-[20px] rounded-full border-[2px] border-[#3b82f6] bg-[#ffffff] peer-checked:border-[#3b82f6] transition-all"></div>
6      <div class="absolute w-[8px] h-[8px] rounded-full bg-[#3b82f6] scale-0 peer-checked:scale-100 transition-transform"></div>
7    </div>
8    <span class="text-[16px] text-[#000000]">Option 1</span>
9  </label>
10  <label class="flex items-center gap-2 cursor-pointer">
11    <div class="relative flex items-center justify-center">
12      <input type="radio" name="radioGroup" class="sr-only peer" />
13      <div class="w-[20px] h-[20px] rounded-full border-[2px] border-[#3b82f6] bg-[#ffffff] peer-checked:border-[#3b82f6] transition-all"></div>
14      <div class="absolute w-[8px] h-[8px] rounded-full bg-[#3b82f6] scale-0 peer-checked:scale-100 transition-transform"></div>
15    </div>
16    <span class="text-[16px] text-[#000000]">Option 2</span>
17  </label>
18  <label class="flex items-center gap-2 cursor-pointer">
19    <div class="relative flex items-center justify-center">
20      <input type="radio" name="radioGroup" class="sr-only peer" />
21      <div class="w-[20px] h-[20px] rounded-full border-[2px] border-[#3b82f6] bg-[#ffffff] peer-checked:border-[#3b82f6] transition-all"></div>
22      <div class="absolute w-[8px] h-[8px] rounded-full bg-[#3b82f6] scale-0 peer-checked:scale-100 transition-transform"></div>
23    </div>
24    <span class="text-[16px] text-[#000000]">Option 3</span>
25  </label>
26</div>