#f5f5ff
1<div class="grid w-[200px] gap-2">2 <label class="flex cursor-pointer items-center gap-3 rounded-xl border-2 border-slate-200 bg-white p-3 transition hover:border-slate-300 has-checked:border-indigo-500 has-checked:bg-indigo-50">3 <input type="radio" name="plano-cartao" class="peer sr-only" />4 <span class="size-4 shrink-0 rounded-full border-2 border-slate-300 transition peer-checked:border-[5px] peer-checked:border-indigo-500"></span>5 <span class="flex-1"><b class="block text-sm text-slate-900">Básico</b><small class="text-[11px] text-slate-500">Para começar</small></span>6 <span class="text-sm font-bold text-slate-900">R$ 0</span>7 </label>8 <label class="flex cursor-pointer items-center gap-3 rounded-xl border-2 border-slate-200 bg-white p-3 transition hover:border-slate-300 has-checked:border-indigo-500 has-checked:bg-indigo-50">9 <input type="radio" name="plano-cartao" class="peer sr-only" checked />10 <span class="size-4 shrink-0 rounded-full border-2 border-slate-300 transition peer-checked:border-[5px] peer-checked:border-indigo-500"></span>11 <span class="flex-1"><b class="block text-sm text-slate-900">Pro</b><small class="text-[11px] text-slate-500">Sem limites</small></span>12 <span class="text-sm font-bold text-slate-900">R$ 29</span>13 </label>14 <label class="flex cursor-pointer items-center gap-3 rounded-xl border-2 border-slate-200 bg-white p-3 transition hover:border-slate-300 has-checked:border-indigo-500 has-checked:bg-indigo-50">15 <input type="radio" name="plano-cartao" class="peer sr-only" />16 <span class="size-4 shrink-0 rounded-full border-2 border-slate-300 transition peer-checked:border-[5px] peer-checked:border-indigo-500"></span>17 <span class="flex-1"><b class="block text-sm text-slate-900">Equipe</b><small class="text-[11px] text-slate-500">Até 10 pessoas</small></span>18 <span class="text-sm font-bold text-slate-900">R$ 99</span>19 </label>20</div>