Skeuomórfico Pastel Restablecimiento de contraseña
Un componente web responsivo de restablecimiento de contraseña diseñado con una estética de skeuomorfismo, con suaves colores pastel. La interfaz es compleja, con múltiples elementos interactivos detallados a través de efectos 3D, sombras y texturas sutiles creadas con Tailwind CSS. Incluye un formulario para ingresar correo electrónico y un botón destacado 'Enviar enlace de restablecimiento', junto con enlaces secundarios. Se admite el tema oscuro. Ideal para exhibiciones de portafolios.
Código HTML
<!-- Ensure TailwindCSS is included in your project -->
<div class="min-h-screen bg-slate-100 dark:bg-slate-900 flex flex-col items-center justify-center p-4 transition-colors duration-300 selection:bg-rose-300 selection:text-rose-900">
<!-- Skeuomorphic Card -->
<div class="bg-white dark:bg-slate-800 p-6 sm:p-10 rounded-3xl
shadow-[0_10px_20px_rgba(0,0,0,0.04),_0_5px_10px_rgba(0,0,0,0.08)]
dark:shadow-[0_10px_20px_rgba(0,0,0,0.25),_0_5px_10px_rgba(0,0,0,0.45)]
w-full max-w-md transform transition-all duration-300
hover:shadow-[0_15px_30px_rgba(0,0,0,0.06),_0_8px_15px_rgba(0,0,0,0.10)]
dark:hover:shadow-[0_15px_30px_rgba(0,0,0,0.3),_0_8px_15px_rgba(0,0,0,0.5)]">
<!-- Header / Title -->
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-rose-600 dark:text-rose-400 tracking-tight">Password Recovery</h1>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Looks like you forgot your password. No worries!</p>
</div>
<!-- Decorative "Grooved" Line -->
<div class="w-full h-px bg-gradient-to-r from-transparent via-slate-300 dark:via-slate-600 to-transparent mt-8 mb-0"></div>
<div class="w-full h-px bg-gradient-to-r from-transparent via-white/[0.7] dark:via-slate-700/[0.7] to-transparent mb-8 transform translate-y-[0.5px]"></div>
<!-- Form -->
<form action="#" method="POST">
<div class="space-y-6">
<!-- Email Input -->
<div>
<label for="email" class="block text-sm font-medium text-slate-600 dark:text-slate-300 mb-1.5 select-none">Email Address</label>
<div class="relative rounded-xl">
<input type="email" name="email" id="email"
class="appearance-none block w-full px-4 py-3
bg-slate-50 dark:bg-slate-700/[0.7] text-slate-800 dark:text-slate-100
placeholder-slate-400 dark:placeholder-slate-500
rounded-xl
border border-slate-200 dark:border-slate-600
shadow-[inset_3px_3px_6px_rgba(0,0,0,0.07),_inset_-2px_-2px_4px_rgba(255,255,255,0.4)]
dark:shadow-[inset_3px_3px_6px_rgba(0,0,0,0.3),_inset_-2px_-2px_4px_rgba(75,85,99,0.2)]
focus:outline-none focus:ring-2 focus:ring-rose-500 dark:focus:ring-rose-400 focus:border-rose-500 dark:focus:border-rose-400
sm:text-sm transition-all duration-200"
placeholder="[email protected]">
</div>
</div>
<!-- "Send Reset Link" Button - Skeuomorphic -->
<div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 rounded-xl
text-base font-semibold text-white select-none
bg-gradient-to-br from-rose-500 to-pink-500 hover:from-rose-500 hover:to-pink-500 /* Adjusted hover for consistency of color */
dark:from-rose-600 dark:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-600
shadow-[0_4px_0_0_#a12147] dark:shadow-[0_4px_0_0_#9d174d] /* Rose-700/Pink-700 like fixed colors */
hover:shadow-[0_3px_0_0_#a12147] dark:hover:shadow-[0_3px_0_0_#9d174d]
active:shadow-[0_1px_0_0_#a12147] dark:active:shadow-[0_1px_0_0_#9d174d]
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 dark:focus:ring-offset-slate-900
transform transition-all duration-100 ease-in-out
hover:-translate-y-0.5 active:translate-y-[1px]">
Send Reset Link
</button>
</div>
</div>
</form>
<!-- Decorative "Grooved" Line -->
<div class="w-full h-px bg-gradient-to-r from-transparent via-slate-300 dark:via-slate-600 to-transparent mt-8 mb-0"></div>
<div class="w-full h-px bg-gradient-to-r from-transparent via-white/[0.7] dark:via-slate-700/[0.7] to-transparent mb-8 transform translate-y-[0.5px]"></div>
<!-- Footer Links -->
<div class="mt-6 text-center">
<p class="text-sm text-slate-500 dark:text-slate-400">
Remember your password?
<a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300 transition-colors duration-150">
Back to Login
</a>
</p>
<p class="mt-2 text-xs text-slate-400 dark:text-slate-500">
Need help? <a href="#" class="hover:underline text-rose-500 dark:text-rose-400">Contact Support</a>
</p>
</div>
<!-- Portfolio Purpose Stamp -->
<div class="mt-8 text-center">
<div class="inline-block mt-2 p-1.5 border-2 border-dashed border-rose-200 dark:border-slate-600 rounded-lg opacity-75 transform rotate-[-2deg] hover:rotate-0 transition-transform duration-200 select-none">
<span class="text-xs font-mono text-rose-400 dark:text-slate-400 tracking-wider">DESIGN SHOWCASE</span>
</div>
</div>
</div>
<!-- Subtle "Surface" Background Element for depth -->
<div class="absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-slate-200/70 dark:from-slate-950/70 to-transparent -z-10 pointer-events-none"></div>
</div>
Componentes relacionados
Componente de restablecimiento de contraseña
Un componente de restablecimiento de contraseña minimalista y receptivo con tonos océano/azul, diseñado para plataformas de mercado, incluida la compatibilidad con el modo oscuro.
Componente de restablecimiento de contraseña
Un componente de restablecimiento de contraseña con Material Design, colores vibrantes, complejidad moderada y propósito de comercio electrónico. Es responsivo y admite el tema oscuro usando Tailwind CSS. No se incluye JavaScript.
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.