Radio by hoshikawamaki

1<div
2  class="flex space-x-2 border-[3px] border-purple-400 rounded-xl select-none"
3>
4  <label
5    class="radio flex flex-grow items-center justify-center rounded-lg p-1 cursor-pointer"
6  >
7    <input
8      type="radio"
9      name="radio"
10      value="html"
11      class="peer hidden"
12      checked=""
13    />
14    <span
15      class="tracking-widest peer-checked:bg-gradient-to-r peer-checked:from-[blueviolet] peer-checked:to-[violet] peer-checked:text-white text-gray-700 p-2 rounded-lg transition duration-150 ease-in-out"
16      >HTML</span
17    >
18  </label>
19
20  <label
21    class="radio flex flex-grow items-center justify-center rounded-lg p-1 cursor-pointer"
22  >
23    <input type="radio" name="radio" value="react" class="peer hidden" />
24    <span
25      class="tracking-widest peer-checked:bg-gradient-to-r peer-checked:from-[blueviolet] peer-checked:to-[violet] peer-checked:text-white text-gray-700 p-2 rounded-lg transition duration-150 ease-in-out"
26      >React</span
27    >
28  </label>
29
30  <label
31    class="radio flex flex-grow items-center justify-center rounded-lg p-1 cursor-pointer"
32  >
33    <input type="radio" name="radio" value="vue" class="peer hidden" />
34    <span
35      class="tracking-widest peer-checked:bg-gradient-to-r peer-checked:from-[blueviolet] peer-checked:to-[violet] peer-checked:text-white text-gray-700 p-2 rounded-lg transition duration-150 ease-in-out"
36      >Vue</span
37    >
38  </label>
39</div>
40