#eef2ff
1<label class="group block w-[200px] font-sans">2 <span class="mb-1.5 flex items-baseline justify-between text-xs font-semibold text-slate-700">Sua bio <span class="text-[10px] font-medium text-slate-400">10 a 40 letras</span></span>3 <input required minlength="10" maxlength="40" placeholder="Conte algo sobre você" class="peer w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-800 shadow-sm outline-none transition placeholder:text-slate-400 focus:border-indigo-400 focus:ring-4 focus:ring-indigo-100 [&:not(:placeholder-shown):valid]:border-emerald-400" />4 <span class="mt-2 block h-1.5 overflow-hidden rounded-full bg-slate-200">5 <span class="block h-full w-0 rounded-full bg-amber-400 transition-all duration-500 group-has-[input:not(:placeholder-shown):invalid]:w-1/2 group-has-[input:not(:placeholder-shown):valid]:w-full group-has-[input:not(:placeholder-shown):valid]:bg-emerald-500"></span>6 </span>7 <span class="mt-1.5 block text-[10px] font-medium text-slate-400 peer-[:not(:placeholder-shown):invalid]:hidden peer-[:not(:placeholder-shown):valid]:hidden">Comece a digitar…</span>8 <span class="mt-1.5 hidden text-[10px] font-medium text-amber-600 peer-[:not(:placeholder-shown):invalid]:block">Quase lá, mais um pouco</span>9 <span class="mt-1.5 hidden text-[10px] font-medium text-emerald-600 peer-[:not(:placeholder-shown):valid]:block">Tamanho perfeito ✓</span>10</label>