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
Un composant complexe et réactif de réinitialisation de mot de passe avec un style de conception skeuomorphe, une palette de couleurs analogue (verts/bleus) et une prise en charge du mode sombre, adapté aux applications de crypto-monnaie/blockchain.
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 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.