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.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 text-center">Reset Password</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Enter your email address to receive a link to create a new password.</p>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
<input type="email" id="email" class="bg-gray-100 dark:bg-gray-700 border rounded-lg w-full h-12 px-4 focus:outline-none focus:ring focus:ring-green-300" required>
</div>
<button type="submit" class="w-full bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-300">Send Reset Link</button>
</form>
<div class="mt-6 text-center">
<p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Login here</a></p>
</div>
</div>
</div>Componentes relacionados
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.
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.
Componente de restablecimiento de contraseña
Un componente de restablecimiento de contraseña inspirado en Material Design para plataformas de redes sociales creado con Tailwind CSS. Cuenta con un esquema de color vibrante con colores de alta saturación, diseño limpio y diseño receptivo con soporte para modo oscuro. El componente incluye campos de entrada para correo electrónico, un botón de envío y texto útil. El diseño utiliza principios de diseño de materiales como la elevación de la tarjeta, el diseño de la cuadrícula y los efectos de profundidad.