Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe conçu avec un style skeuomorphe, utilisant des tons de terre pour une esthétique naturelle et structuré pour les applications de tableau de bord. Il prend en charge le mode sombre et est réactif.
HTML Code
<div class="max-w-md mx-auto mt-10 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Reset Your Password</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Please enter your email address to receive a password reset link.</p>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
<input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label for="new-password" class="block text-gray-700 dark:text-gray-300 mb-2">New Password</label>
<input type="password" id="new-password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="Enter new password" required />
</div>
<div class="mb-4">
<label for="confirm-password" class="block text-gray-700 dark:text-gray-300 mb-2">Confirm Password</label>
<input type="password" id="confirm-password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="Re-enter new password" required />
</div>
<button type="submit" class="w-full py-3 bg-green-500 hover:bg-green-600 text-white rounded-lg transition duration-200">Reset Password</button>
</form>
<div class="mt-4 text-center">
<p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Log in</a></p>
</div>
</div>Composants associés
Composant de réinitialisation de mot de passe - Tableau de bord rétro/vibrant
Un composant de réinitialisation de mot de passe de style rétro-vintage avec des couleurs vives, adapté à un tableau de bord. Il dispose d’un design réactif et d’un support de thème sombre utilisant Tailwind CSS. Le design évoque l’esthétique des années 80/90.
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
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.