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.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-900">
<div class="bg-gray-800 p-8 rounded-lg shadow-xl w-96">
<h2 class="text-3xl font-bold text-teal-400 mb-6 text-center">Reset Password</h2>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-300 text-sm font-semibold mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-300 text-sm font-semibold mb-2">New Password</label>
<input type="password" id="password" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Enter new password">
</div>
<div class="mb-6">
<label for="confirm-password" class="block text-gray-300 text-sm font-semibold mb-2">Confirm New Password</label>
<input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Confirm new password">
</div>
<button type="submit" class="w-full bg-teal-600 text-white py-3 rounded-lg font-semibold hover:bg-teal-700 transition duration-300">Reset Password</button>
</form>
</div>
</div>Componentes relacionados
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.
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.
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.