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
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
Composant de réinitialisation de mot de passe réactif avec une interface utilisateur en mode sombre, utilisant un jeu de couleurs analogue. Conçu pour les applications de commerce électronique.
Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe complexe et réactif avec un style de conception monospace/développeur, avec une palette de couleurs noir et blanc avec un accent vif. Conçu pour la documentation/les sites wiki, il inclut la prise en charge du mode sombre et du HTML sémantique.