#f4f4f5
1<fieldset class="w-[210px] font-sans">2 <legend class="mb-2 text-xs font-bold text-zinc-800">Aparência</legend>3 <div class="grid grid-cols-3 gap-2">4 <label class="group cursor-pointer text-center">5 <input type="radio" name="tema-app" class="peer sr-only" checked />6 <span class="relative block h-[52px] overflow-hidden rounded-lg border border-zinc-200 bg-white p-1.5 ring-offset-2 ring-offset-[#f4f4f5] transition group-hover:-translate-y-0.5 peer-checked:ring-2 peer-checked:ring-indigo-500 peer-focus-visible:ring-2 peer-focus-visible:ring-indigo-300">7 <span class="mb-1 flex gap-0.5"><i class="size-1 rounded-full bg-rose-400"></i><i class="size-1 rounded-full bg-amber-400"></i><i class="size-1 rounded-full bg-emerald-400"></i></span>8 <span class="block h-1.5 w-3/4 rounded-sm bg-zinc-300"></span>9 <span class="mt-1 block h-1.5 w-1/2 rounded-sm bg-zinc-200"></span>10 <span class="mt-1.5 block h-2.5 w-2/3 rounded-sm bg-indigo-400"></span>11 </span>12 <span class="mt-1.5 block text-[11px] font-medium text-zinc-500 peer-checked:font-bold peer-checked:text-indigo-600">Claro</span>13 </label>14 <label class="group cursor-pointer text-center">15 <input type="radio" name="tema-app" class="peer sr-only" />16 <span class="relative block h-[52px] overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 p-1.5 ring-offset-2 ring-offset-[#f4f4f5] transition group-hover:-translate-y-0.5 peer-checked:ring-2 peer-checked:ring-indigo-500 peer-focus-visible:ring-2 peer-focus-visible:ring-indigo-300">17 <span class="mb-1 flex gap-0.5"><i class="size-1 rounded-full bg-rose-400"></i><i class="size-1 rounded-full bg-amber-400"></i><i class="size-1 rounded-full bg-emerald-400"></i></span>18 <span class="block h-1.5 w-3/4 rounded-sm bg-zinc-600"></span>19 <span class="mt-1 block h-1.5 w-1/2 rounded-sm bg-zinc-700"></span>20 <span class="mt-1.5 block h-2.5 w-2/3 rounded-sm bg-indigo-400"></span>21 </span>22 <span class="mt-1.5 block text-[11px] font-medium text-zinc-500 peer-checked:font-bold peer-checked:text-indigo-600">Escuro</span>23 </label>24 <label class="group cursor-pointer text-center">25 <input type="radio" name="tema-app" class="peer sr-only" />26 <span class="relative block h-[52px] overflow-hidden rounded-lg border border-zinc-300 bg-[linear-gradient(135deg,#fff_50%,#18181b_50%)] p-1.5 ring-offset-2 ring-offset-[#f4f4f5] transition group-hover:-translate-y-0.5 peer-checked:ring-2 peer-checked:ring-indigo-500 peer-focus-visible:ring-2 peer-focus-visible:ring-indigo-300">27 <span class="mb-1 flex gap-0.5"><i class="size-1 rounded-full bg-rose-400"></i><i class="size-1 rounded-full bg-amber-400"></i><i class="size-1 rounded-full bg-emerald-400"></i></span>28 <span class="block h-1.5 w-3/4 rounded-sm bg-zinc-400"></span>29 <span class="mt-1 block h-1.5 w-1/2 rounded-sm bg-zinc-400/70"></span>30 <span class="mt-1.5 block h-2.5 w-2/3 rounded-sm bg-indigo-400"></span>31 </span>32 <span class="mt-1.5 block text-[11px] font-medium text-zinc-500 peer-checked:font-bold peer-checked:text-indigo-600">Sistema</span>33 </label>34 </div>35</fieldset>