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

Componente de restablecimiento de contraseña

Un componente de restablecimiento de contraseña minimalista y receptivo con tonos océano/azul, diseñado para plataformas de mercado, incluida la compatibilidad con el modo oscuro.

Abrir

Componente de restablecimiento de contraseña

Un componente complejo de restablecimiento de contraseña diseñado para servicios gubernamentales/públicos, con un diseño limpio y minimalista basado en la tipografía con colores de alto contraste y capacidad de respuesta completa, incluida la compatibilidad con el modo oscuro.

Abrir

Componente de restablecimiento de contraseña

Un componente de restablecimiento de contraseña con Material Design, colores vibrantes, complejidad moderada y propósito de comercio electrónico. Es responsivo y admite el tema oscuro usando Tailwind CSS. No se incluye JavaScript.

Abrir