Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe propre et fiable, conçu pour les sites d’actualités et de médias d’entreprise/professionnels, avec des neutres chauds, une réactivité et une prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 lg:p-8">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 border border-gray-200 dark:border-gray-700">
<div class="text-center mb-6 sm:mb-8">
<h1 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2">Reset Your Password</h1>
<p class="text-sm text-gray-600 dark:text-gray-400">Enter your email address to receive a password reset link.</p>
</div>
<form>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
<input type="email" id="email" name="email" placeholder="[email protected]" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400 sm:text-sm text-gray-900 bg-gray-50">
</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-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-600 dark:focus:ring-offset-gray-800">
Send Reset Link
</button>
</form>
<div class="mt-6 text-center text-sm">
<a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">
Remember your password? Log in
</a>
</div>
</div>
</div>Composants associés
Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe réactif avec un design « inspiré du papier/de l’impression », des « couleurs bonbons/douces » et la prise en charge du mode sombre, adapté aux entreprises industrielles et manufacturières.
Composant de réinitialisation de mot de passe
Composant de réinitialisation de mot de passe skeuomorphique pour les médias sociaux avec schéma de couleurs analogue et prise en charge du mode sombre.
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.