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
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.
Réinitialisation de mot de passe Composant brutalisme Complexe Tableau de bord analogue
Un composant de réinitialisation de mot de passe de style brutaliste pour un tableau de bord, doté d’une mise en page complexe, d’une palette de couleurs analogue, d’une réactivité et d’une prise en charge du mode sombre.
Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe conçu avec un style skeuomorphe, utilisant des tons de terre pour une esthétique naturelle et structuré pour les applications de tableau de bord. Il prend en charge le mode sombre et est réactif.