0
#eff6ff
1<form class="group w-[204px] rounded-2xl bg-white p-3.5 shadow-xl shadow-blue-900/10 ring-1 ring-blue-100">2 <div class="flex items-center gap-2">3 <span class="grid size-8 place-items-center rounded-lg bg-blue-600 text-white">4 <svg class="size-4 group-focus-within:animate-[pino_.7s_ease-in-out_infinite] motion-reduce:animate-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>5 </span>6 <div>7 <p class="text-[13px] font-bold leading-tight text-slate-900">Onde entregamos?</p>8 <p class="text-[10px] text-slate-500">Digite o CEP</p>9 </div>10 </div>11 <div class="mt-3 flex gap-1.5">12 <input id="cep" inputmode="numeric" required pattern="[0-9]{5}-?[0-9]{3}" maxlength="9" placeholder="00000-000" aria-label="CEP" class="w-0 flex-1 rounded-lg border border-slate-200 bg-slate-50 px-2.5 py-1.5 font-mono text-xs tracking-wider text-slate-900 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-500/20">13 <button type="button" class="rounded-lg bg-slate-900 px-2.5 text-[11px] font-semibold text-white transition hover:bg-blue-600">Buscar</button>14 </div>15 <div class="mt-3 rounded-xl border border-dashed border-slate-200 p-2.5 transition group-has-[#cep:valid]:border-solid group-has-[#cep:valid]:border-blue-200 group-has-[#cep:valid]:bg-blue-50">16 <div class="space-y-1.5 group-has-[#cep:valid]:hidden">17 <p class="h-2 w-4/5 rounded bg-slate-100"></p>18 <p class="h-2 w-3/5 rounded bg-slate-100"></p>19 <p class="text-[9px] text-slate-400">O endereço aparece aqui</p>20 </div>21 <div class="hidden group-has-[#cep:valid]:block">22 <p class="text-[9px] font-bold uppercase tracking-wider text-blue-600">Endereço encontrado</p>23 <p class="text-[11px] font-semibold text-slate-900">Rua das Acácias</p>24 <p class="text-[10px] text-slate-500">Centro · Vale Verde, MG</p>25 </div>26 </div>27 <div class="mt-2 grid grid-cols-[1fr_2fr] gap-1.5">28 <input placeholder="Nº" aria-label="Número" class="w-full min-w-0 rounded-lg border border-slate-200 bg-slate-50 px-2 py-1.5 text-xs outline-none focus:border-blue-500 focus:bg-white">29 <input placeholder="Complemento" aria-label="Complemento" class="w-full min-w-0 rounded-lg border border-slate-200 bg-slate-50 px-2 py-1.5 text-xs outline-none focus:border-blue-500 focus:bg-white">30 </div>31</form>