Componente de restablecimiento de contraseña
Componente de restablecimiento de contraseña con diseño retro / vintage, combinación de colores de tonos tierra y nivel de complejidad complejo, para fines comerciales / corporativos, utilizando Tailwind CSS. Diseño responsivo con soporte para temas oscuros. No se necesita código JavaScript, solo HTML con clases Tailwind. Uso de picsum.photos para imágenes y randomuser.me para avatares.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900">
<div class="px-8 py-6 mx-4 mt-4 text-left bg-earth-200 dark:bg-earth-800 shadow-lg md:w-1/3 lg:w-1/3 sm:w-1/3 rounded-lg border dark:border-stone-700 border-earth-300">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20 text-stone-600 dark:text-stone-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 7V14" />
</svg>
</div>
<h3 class="text-2xl font-bold text-center text-stone-800 dark:text-stone-200">Reset Password</h3>
<form action="">
<div class="mt-4">
<div>
<label class="block text-stone-700 dark:text-stone-300" for="email">Email</label>
<input type="text" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-stone-600 dark:focus:ring-stone-400 border-stone-300 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-200"
>
</div>
<div class="mt-4">
<label class="block">
<a href="#" class="text-sm text-stone-600 dark:text-stone-400 hover:underline">Forgot Password?</a>
</label>
</div>
<div class="flex items-baseline justify-between">
<button class="px-6 py-2 mt-4 text-white bg-stone-600 dark:bg-stone-400 rounded-lg hover:bg-stone-900 dark:hover:bg-stone-600">Reset</button>
</div>
</div>
</form>
</div>
</div>
Componentes relacionados
Componente de restablecimiento de contraseña
Componente de restablecimiento de contraseña receptivo con soporte de modo oscuro
Componente de restablecimiento de contraseña
Un componente de restablecimiento de contraseña de diseño minimalista y plano con tonos tierra, diseño receptivo y soporte para temas oscuros, adaptado al contenido del blog.
Componente de restablecimiento de contraseña - Panel de control retro/vibrante
Un componente de restablecimiento de contraseña de estilo retro-vintage con colores vibrantes, adecuado para un tablero. Cuenta con un diseño responsivo y soporte para temas oscuros utilizando Tailwind CSS. El diseño evoca la estética de los años 80/90.