1<form class="w-[200px] rounded-2xl bg-white p-4 shadow-xl shadow-emerald-900/10 ring-1 ring-emerald-100">2 <div class="mb-3 grid size-8 place-items-center rounded-lg bg-emerald-600 text-white">3 <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>4 </div>5 <p class="text-[15px] font-bold text-slate-900">Entrar</p>6 <p class="text-[11px] text-slate-500">Bom te ver de novo.</p>7 <label class="mt-3 block text-[10px] font-semibold text-slate-600">E-mail8 <input type="email" placeholder="voce@email.com" class="mt-1 w-full rounded-lg border border-slate-200 bg-slate-50 px-2.5 py-1.5 text-xs font-normal text-slate-900 outline-none transition focus:border-emerald-500 focus:bg-white focus:ring-2 focus:ring-emerald-500/20">9 </label>10 <p class="mt-2 text-[10px] font-semibold text-slate-600">Senha</p>11 <div class="relative mt-1">12 <input type="text" value="girassol22" aria-label="Senha" autocomplete="off" class="senha w-full rounded-lg border border-slate-200 bg-slate-50 py-1.5 pl-2.5 pr-8 text-xs text-slate-900 outline-none transition focus:border-emerald-500 focus:bg-white focus:ring-2 focus:ring-emerald-500/20">13 <label class="absolute right-1 top-1/2 grid size-6 -translate-y-1/2 cursor-pointer place-items-center rounded-md text-slate-400 transition hover:bg-slate-100 hover:text-emerald-600" title="Mostrar senha">14 <input type="checkbox" id="ver" class="peer sr-only">15 <svg class="size-4 peer-checked:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 3l18 18M10.6 6.1A9.8 9.8 0 0 1 12 6c6 0 9.5 6 9.5 6a17 17 0 0 1-2.6 3.3M6.6 6.6C3.9 8.3 2.5 12 2.5 12S6 18 12 18c1.6 0 3-.4 4.2-1M9.9 9.9a3 3 0 0 0 4.2 4.2"/></svg>16 <svg class="hidden size-4 text-emerald-600 peer-checked:block" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2.5 12S6 6 12 6s9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6z"/><circle cx="12" cy="12" r="3"/></svg>17 </label>18 </div>19 <a href="#" class="mt-1.5 block text-right text-[10px] font-semibold text-emerald-700 hover:underline">Esqueci a senha</a>20 <button type="button" class="mt-3 w-full rounded-lg bg-slate-900 py-2 text-xs font-semibold text-white transition hover:bg-emerald-600 active:scale-[.98]">Entrar</button>21</form>