Komponente zum Zurücksetzen des Kennworts
Eine Komponente zum Zurücksetzen des Kennworts, die in einem skeuomorphen Stil entwickelt wurde, Erdtöne für eine natürliche Ästhetik verwendet und für Dashboard-Anwendungen strukturiert ist. Es unterstützt den Dunkelmodus und ist reaktionsschnell.
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>Verwandte Komponenten
Komponente zum Zurücksetzen des Kennworts
Eine einfache Komponente zum Zurücksetzen des Passworts, die nach den Prinzipien des Material Designs mit einem Graustufen-Farbschema entwickelt wurde. Es ist reaktionsschnell und unterstützt den Dunkelmodus.
Komponente zum Zurücksetzen des Kennworts
Eine lebendige Komponente zum Zurücksetzen des Passworts im 3D-Stil für Blogs und den Konsum von Inhalten. Es unterstützt dunkle Themen und ist reich an interaktiven Elementen.
Skeuomorphes Pastell-Passwort zurücksetzen
Eine reaktionsschnelle Webkomponente zum Zurücksetzen des Passworts, die mit einer Skeuomorphismus-Ästhetik und sanften Pastellfarben gestaltet wurde. Die Benutzeroberfläche ist komplex und verfügt über mehrere interaktive Elemente, die durch 3D-Effekte, Schatten und subtile Texturen, die mit Tailwind CSS erstellt wurden, detailliert dargestellt werden. Es enthält ein Formular für die E-Mail-Eingabe und eine auffällige Schaltfläche "Link zum Zurücksetzen senden" sowie sekundäre Links. Dark Theme wird unterstützt. Ideal für Portfolio-Showcases.