Réinitialisation du mot de passe Skeuomorphic Pastel
Un composant Web réactif de réinitialisation de mot de passe conçu avec une esthétique Skeuomorphism, avec des couleurs pastel douces. L’interface est complexe, avec de multiples éléments interactifs détaillés à travers des effets 3D, des ombres et des textures subtiles créées avec Tailwind CSS. Il comprend un formulaire pour la saisie d’e-mails et un bouton « Envoyer le lien de réinitialisation » bien visible, ainsi que des liens secondaires. Le thème sombre est pris en charge. Idéal pour les vitrines de portfolio.
HTML Code
<!-- 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>
Composants associés
Composant de réinitialisation de mot de passe
Composant de réinitialisation de mot de passe réactif avec prise en charge du mode sombre
Composant de réinitialisation de mot de passe
Composant de réinitialisation de mot de passe avec style Neumorphisme, Schéma de couleurs complémentaire, Complexité complexe, à des fins de médias sociaux, à l’aide de Tailwind CSS. Conception réactive avec prise en charge du thème sombre.
Composant de réinitialisation de mot de passe
Un composant simple de réinitialisation de mot de passe conçu à l’aide des principes de conception matérielle avec un jeu de couleurs en niveaux de gris. Il est réactif et prend en charge le mode sombre.