Componente de restablecimiento de contraseña - Glassmorphism Grayscale
Un componente de restablecimiento de contraseña con temática de glassmorphism con un esquema de color en escala de grises, con campos y botones de entrada translúcidos similares al vidrio esmerilado. Diseñado para la capacidad de respuesta e incluye soporte para el modo oscuro. Aunque el propósito es el tiempo/clima, el formulario de restablecimiento de contraseña en sí es genérico.
Código HTML
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 duration-300">
<div class="w-full max-w-md p-8 rounded-xl shadow-2xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 border border-gray-200 border-opacity-30 dark:border-gray-700 dark:border-opacity-30 transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-3xl">
<h2 class="text-3xl font-extrabold text-center text-gray-800 dark:text-gray-100 mb-6 drop-shadow-md">Reset Password</h2>
<p class="text-center text-gray-700 dark:text-gray-300 mb-8 max-w-sm mx-auto drop-shadow-sm">Enter your email address below and we'll send you a link to reset your password.</p>
<form class="space-y-6">
<div>
<label for="email" class="sr-only">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required class="block w-full px-5 py-3 rounded-lg text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 border border-gray-300 border-opacity-50 dark:border-gray-600 dark:border-opacity-50 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm"
placeholder="[email protected]">
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-6 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white bg-gray-700 bg-opacity-80 dark:bg-gray-600 dark:bg-opacity-80 hover:bg-gray-800 hover:bg-opacity-90 dark:hover:bg-gray-700 dark:hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out transform active:scale-95">
Send Reset Link
</button>
</div>
</form>
<div class="mt-8 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">
Remember your password?
<a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:rounded-sm">
Log in
</a>
</p>
</div>
</div>
</div>Componentes relacionados
Componente de restablecimiento de contraseña
Un componente de restablecimiento de contraseña interactivo con una interfaz de usuario de modo oscuro, que utiliza una combinación de colores análoga. Diseñado para aplicaciones de comercio electrónico.
Componente de restablecimiento de contraseña
Un componente minimalista de restablecimiento de contraseña con diseño responsivo y soporte de temas oscuros usando Tailwind CSS.
Componente de restablecimiento de contraseña
Componente de restablecimiento de contraseña con estilo de neumorfismo, combinación de colores complementaria, complejidad compleja, para fines de redes sociales, utilizando Tailwind CSS. Diseño responsivo con soporte para temas oscuros.