Composant de réinitialisation de mot de passe
Composant de réinitialisation de mot de passe de conception minimaliste / plate avec des tons de terre, adapté aux plateformes immobilières. Il dispose d’une mise en page réactive, d’une prise en charge du mode sombre et de plusieurs champs de saisie pour une interface complexe.
HTML Code
<div class="min-h-screen bg-stone-100 flex items-center justify-center p-4 dark:bg-stone-900">
<div class="max-w-md w-full bg-white p-8 rounded-lg shadow-xl dark:bg-stone-800 dark:text-stone-200 border border-stone-200 dark:border-stone-700">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-2">Reset Your Password</h2>
<p class="text-stone-600 dark:text-stone-400">Enter your new password below. It should be strong and unique.</p>
</div>
<form class="space-y-6">
<div>
<label for="new-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">New Password</label>
<input type="password" id="new-password" name="new-password" required class="mt-1 block w-full px-4 py-2 bg-stone-50 border border-stone-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400">
<p class="mt-2 text-sm text-stone-500 dark:text-stone-400">Must be at least 8 characters, with letters, numbers, and symbols.</p>
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Confirm New Password</label>
<input type="password" id="confirm-password" name="confirm-password" required class="mt-1 block w-full px-4 py-2 bg-stone-50 border border-stone-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400">
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 rounded dark:bg-stone-700 dark:border-stone-600 dark:checked:bg-amber-700">
<label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-300">Remember me on this device</label>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 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-800 dark:focus:ring-offset-stone-800">
Reset Password
</button>
</div>
</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">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 style Neumorphisme, Schéma de couleurs complémentaire, Complexité complexe, à des fins de médias sociaux, à l’aide de Tailwind CSS. Conception réactive avec prise en charge du thème sombre.
Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe dynamique de style 3D pour les blogs et la consommation de contenu. Il prend en charge le thème sombre et est riche en éléments interactifs.
Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe avec Material Design, des couleurs vives, une complexité modérée et un objectif de commerce électronique. Il est réactif et prend en charge le thème sombre en utilisant Tailwind CSS. Aucun JavaScript n’est inclus.