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.
Código HTML
<!-- Password Reset Card Container -->
<div class="max-w-md mx-auto my-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300">
<!-- Header with Icon -->
<div class="text-center mb-6">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600 dark:text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
</div>
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">Reset Password</h1>
<p class="text-gray-600 dark:text-gray-300 mt-2">Enter your email to receive a password reset link</p>
</div>
<!-- Form -->
<form class="space-y-4">
<!-- Email Input -->
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
</svg>
</div>
<input id="email" type="email" class="pl-10 w-full py-2 px-4 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent dark:text-white transition-colors duration-200" placeholder="[email protected]" required>
</div>
</div>
<!-- Submit Button -->
<button type="submit" class="w-full py-2 px-4 bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 focus:ring-offset-purple-200 text-white font-medium rounded-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
Send Reset Link
</button>
<!-- Additional Info -->
<div class="text-center mt-4">
<p class="text-sm text-gray-600 dark:text-gray-400">
Remember your password?
<a href="#" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 font-medium transition-colors duration-200">
Sign in
</a>
</p>
</div>
</form>
<!-- Security Note -->
<div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p>We'll send a secure link valid for 30 minutes</p>
</div>
</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 - 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.
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.