Radios

Gorjeta

por @ravox·tailwind

0
#fff5ea
1<fieldset class="group w-[206px] rounded-2xl bg-white p-3 font-sans shadow-[0_12px_28px_-16px_rgba(154,52,18,.45)]">2  <legend class="sr-only">Gorjeta</legend>3  <p class="mb-2 flex items-baseline justify-between text-xs text-stone-500">Conta <b class="text-sm text-stone-800">R$ 80,00</b></p>4  <div class="grid grid-cols-3 gap-1.5">5    <label class="cursor-pointer rounded-xl border-2 border-stone-200 py-1.5 text-center transition hover:border-orange-300 has-checked:scale-105 has-checked:border-orange-500 has-checked:bg-orange-500 has-checked:text-white has-checked:shadow-lg has-checked:shadow-orange-500/30 has-focus-visible:ring-2 has-focus-visible:ring-orange-300">6      <input type="radio" name="gorjeta" id="g10" class="sr-only" />7      <b class="block text-sm">10%</b><small class="text-[10px] opacity-70">R$ 8</small>8    </label>9    <label class="cursor-pointer rounded-xl border-2 border-stone-200 py-1.5 text-center transition hover:border-orange-300 has-checked:scale-105 has-checked:border-orange-500 has-checked:bg-orange-500 has-checked:text-white has-checked:shadow-lg has-checked:shadow-orange-500/30 has-focus-visible:ring-2 has-focus-visible:ring-orange-300">10      <input type="radio" name="gorjeta" id="g15" class="sr-only" checked />11      <b class="block text-sm">15%</b><small class="text-[10px] opacity-70">R$ 12</small>12    </label>13    <label class="cursor-pointer rounded-xl border-2 border-stone-200 py-1.5 text-center transition hover:border-orange-300 has-checked:scale-105 has-checked:border-orange-500 has-checked:bg-orange-500 has-checked:text-white has-checked:shadow-lg has-checked:shadow-orange-500/30 has-focus-visible:ring-2 has-focus-visible:ring-orange-300">14      <input type="radio" name="gorjeta" id="g20" class="sr-only" />15      <b class="block text-sm">20%</b><small class="text-[10px] opacity-70">R$ 16</small>16    </label>17  </div>18  <p class="mt-2.5 flex items-baseline justify-between border-t border-dashed border-stone-200 pt-2 text-xs text-stone-500">Total19    <b class="text-base text-orange-600"><span class="hidden group-has-[#g10:checked]:inline">R$ 88,00</span><span class="hidden group-has-[#g15:checked]:inline">R$ 92,00</span><span class="hidden group-has-[#g20:checked]:inline">R$ 96,00</span></b>20  </p>21</fieldset>
#gorjeta#porcentagem#conta#claro

Mais radios

Ver todos