#eef6ff
1<label class="group relative flex w-[200px] cursor-pointer flex-col items-center gap-1.5 rounded-2xl border-2 border-dashed border-sky-300 bg-white px-4 py-5 text-center font-sans transition hover:border-sky-500 hover:bg-sky-50/60 has-focus-visible:ring-4 has-focus-visible:ring-sky-200 has-valid:border-solid has-valid:border-emerald-400 has-valid:bg-emerald-50/60">2 <input type="file" required class="peer sr-only" />3 <span class="relative mb-1 grid size-12 place-items-center rounded-2xl bg-sky-100 text-sky-600 transition group-hover:-translate-y-0.5 peer-valid:bg-emerald-100 peer-valid:text-emerald-600">4 <svg class="size-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 18 8.5a4 4 0 0 1 .5 7.97"/></svg>5 <svg class="absolute top-[22px] size-3.5 group-hover:animate-bounce motion-reduce:animate-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V8M7 12l5-5 5 5"/></svg>6 </span>7 <b class="text-sm text-slate-800 peer-valid:hidden">Arraste ou clique</b>8 <b class="hidden text-sm text-emerald-700 peer-valid:block">Arquivo pronto ✓</b>9 <small class="text-[11px] text-slate-500">PNG, JPG ou PDF · até 5 MB</small>10</label>