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
Componente de restablecimiento de contraseña con estilo de neumorfismo, combinación de colores complementaria, complejidad compleja, para fines de redes sociales, utilizando Tailwind CSS. Diseño responsivo con soporte para temas oscuros.
Componente de restablecimiento de contraseña - Panel de control retro/vibrante
Un componente de restablecimiento de contraseña de estilo retro-vintage con colores vibrantes, adecuado para un tablero. Cuenta con un diseño responsivo y soporte para temas oscuros utilizando Tailwind CSS. El diseño evoca la estética de los años 80/90.
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.