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.
HTML Code
<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-orange-50 to-red-100 dark:from-gray-900 dark:to-gray-800 font-sans">
<div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8 space-y-6 transform transition-all duration-300 hover:shadow-2xl">
<div class="text-center">
<h2 class="mt-2 text-3xl font-extrabold text-orange-600 dark:text-orange-400 capitalize drop-shadow-sm">Reset Your Password</h2>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">Enter your email address to receive a password reset link.</p>
</div>
<form class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email address</label>
<div class="mt-1">
<input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-transparent focus:border-orange-500 dark:focus:border-orange-400 sm:text-sm bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white transition-colors duration-200 ease-in-out">
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-700 dark:focus:ring-orange-500 transition-colors duration-200 ease-in-out transform hover:scale-105 active:scale-95">
Send Reset Link
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm">
<a href="#" class="font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300">
Remembered your password? 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 inspiré de Material Design pour les plateformes de médias sociaux construit avec Tailwind CSS. Dispose d’une palette de couleurs vibrantes avec des couleurs à haute saturation, d’une mise en page épurée et d’un design réactif avec prise en charge du mode sombre. Le composant comprend des champs de saisie pour l’e-mail, un bouton d’envoi et un texte utile. La conception utilise des principes de conception matérielle tels que l’élévation de la carte, la disposition de la grille et les effets de profondeur.
Composant de réinitialisation de mot de passe
Un composant complexe de réinitialisation de mot de passe conçu pour les services gouvernementaux/publics, avec un design épuré et minimaliste basé sur la typographie avec des couleurs à contraste élevé et une réactivité totale, y compris la prise en charge du 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.