Componente de restablecimiento de contraseña
Un componente de restablecimiento de contraseña diseñado con un estilo skeuomórfico, que utiliza tonos tierra para una estética natural y estructurado para aplicaciones de tablero. Es compatible con el modo oscuro y responde.
Código HTML
<div class="max-w-md mx-auto mt-10 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Reset Your Password</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Please enter your email address to receive a password reset link.</p>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
<input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label for="new-password" class="block text-gray-700 dark:text-gray-300 mb-2">New Password</label>
<input type="password" id="new-password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="Enter new password" required />
</div>
<div class="mb-4">
<label for="confirm-password" class="block text-gray-700 dark:text-gray-300 mb-2">Confirm Password</label>
<input type="password" id="confirm-password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="Re-enter new password" required />
</div>
<button type="submit" class="w-full py-3 bg-green-500 hover:bg-green-600 text-white rounded-lg transition duration-200">Reset Password</button>
</form>
<div class="mt-4 text-center">
<p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Log in</a></p>
</div>
</div>Componentes relacionados
Componente de restablecimiento de contraseña Brutalismo complejo Tablero análogo
Un componente de restablecimiento de contraseña de estilo brutalista para un tablero, con un diseño complejo, combinación de colores análoga, capacidad de respuesta y compatibilidad con el modo oscuro.
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 de restablecimiento de contraseña receptivo con diseño de neumorfismo, compatibilidad con modo oscuro y sin JavaScript.