Composant de réinitialisation de mot de passe - Glassmorphism Grayscale
Un composant de réinitialisation de mot de passe sur le thème du glassmorphism avec une palette de couleurs en niveaux de gris, avec des champs de saisie et des boutons translucides semblables à du verre dépoli. Conçu pour la réactivité et inclut la prise en charge du mode sombre. Bien que le but soit la météo/le climat, le formulaire de réinitialisation du mot de passe lui-même est générique.
HTML Code
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 duration-300">
<div class="w-full max-w-md p-8 rounded-xl shadow-2xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 border border-gray-200 border-opacity-30 dark:border-gray-700 dark:border-opacity-30 transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-3xl">
<h2 class="text-3xl font-extrabold text-center text-gray-800 dark:text-gray-100 mb-6 drop-shadow-md">Reset Password</h2>
<p class="text-center text-gray-700 dark:text-gray-300 mb-8 max-w-sm mx-auto drop-shadow-sm">Enter your email address below and we'll send you a link to reset your password.</p>
<form class="space-y-6">
<div>
<label for="email" class="sr-only">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required class="block w-full px-5 py-3 rounded-lg text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 border border-gray-300 border-opacity-50 dark:border-gray-600 dark:border-opacity-50 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm"
placeholder="[email protected]">
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-6 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white bg-gray-700 bg-opacity-80 dark:bg-gray-600 dark:bg-opacity-80 hover:bg-gray-800 hover:bg-opacity-90 dark:hover:bg-gray-700 dark:hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out transform active:scale-95">
Send Reset Link
</button>
</div>
</form>
<div class="mt-8 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">
Remember your password?
<a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:rounded-sm">
Log in
</a>
</p>
</div>
</div>
</div>Composants associés
Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe au design minimaliste et plat avec des tons de terre, un design réactif et une prise en charge du thème sombre, adapté au contenu du blog.
Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe minimaliste et réactif avec des tons crépuscules/chauds, adapté aux sites Web de restauration/restaurants, y compris la prise en charge du mode sombre.
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.