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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200">Reset Password</h2>
<p class="mt-2 text-center text-gray-600 dark:text-gray-400">Enter your email address and we will send you a link to reset your password.</p>
<form class="mt-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
<input type="email" required class="mt-1 block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 dark:bg-gray-700 dark:border-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400" placeholder="[email protected]" />
</div>
<button type="submit" class="mt-6 w-full py-2 px-4 bg-gray-800 text-white font-semibold rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Send Reset Link</button>
</form>
<div class="mt-4 text-center">
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">Back to Login</a>
</div>
</div>
</div>
Composants associés
Composant de réinitialisation de mot de passe
Composant de réinitialisation de mot de passe avec conception Skeuomorphism, effets réactifs et prise en charge du thème 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.
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.