Componentes Restablecimiento de contraseña Componente de restablecimiento de contraseña

Componente de restablecimiento de contraseña

Un componente simple de restablecimiento de contraseña diseñado según los principios de Material Design con un esquema de color en escala de grises. Es sensible y admite el modo oscuro.

Vista previa

Código HTML

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200">Reset Password</h2>
        <p class="mt-2 text-center text-gray-600 dark:text-gray-400">Enter your email address and we will send you a link to reset your password.</p>
        <form class="mt-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
                <input type="email" required class="mt-1 block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 dark:bg-gray-700 dark:border-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400" placeholder="[email protected]" />
            </div>
            <button type="submit" class="mt-6 w-full py-2 px-4 bg-gray-800 text-white font-semibold rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Send Reset Link</button>
        </form>
        <div class="mt-4 text-center">
            <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">Back to Login</a>
        </div>
    </div>
</div>

Componentes relacionados

Skeuomórfico Pastel Restablecimiento de contraseña

Un componente web responsivo de restablecimiento de contraseña diseñado con una estética de skeuomorfismo, con suaves colores pastel. La interfaz es compleja, con múltiples elementos interactivos detallados a través de efectos 3D, sombras y texturas sutiles creadas con Tailwind CSS. Incluye un formulario para ingresar correo electrónico y un botón destacado 'Enviar enlace de restablecimiento', junto con enlaces secundarios. Se admite el tema oscuro. Ideal para exhibiciones de portafolios.

Abrir