Komponente zum Zurücksetzen des Kennworts
Eine reaktionsfähige Komponente zum Zurücksetzen von Kennwörtern mit einer Benutzeroberfläche im dunklen Modus, die ein analoges Farbschema verwendet. Entwickelt für E-Commerce-Anwendungen.
HTML-Code
<div class="min-h-screen flex items-center justify-center bg-gray-900">
<div class="bg-gray-800 p-8 rounded-lg shadow-xl w-96">
<h2 class="text-3xl font-bold text-teal-400 mb-6 text-center">Reset Password</h2>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-300 text-sm font-semibold mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-300 text-sm font-semibold mb-2">New Password</label>
<input type="password" id="password" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Enter new password">
</div>
<div class="mb-6">
<label for="confirm-password" class="block text-gray-300 text-sm font-semibold mb-2">Confirm New Password</label>
<input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Confirm new password">
</div>
<button type="submit" class="w-full bg-teal-600 text-white py-3 rounded-lg font-semibold hover:bg-teal-700 transition duration-300">Reset Password</button>
</form>
</div>
</div>Verwandte Komponenten
Komponente zum Zurücksetzen des Kennworts
Eine minimalistische und flache Design-Komponente zum Zurücksetzen von Passwörtern mit Erdtönen, responsivem Design und Unterstützung für dunkle Themen, die auf Blog-Inhalte zugeschnitten ist.
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.
Komponente zum Zurücksetzen des Kennworts
Eine von Material Design inspirierte Komponente zum Zurücksetzen von Passwörtern für Social-Media-Plattformen, die mit Tailwind CSS erstellt wurde. Verfügt über ein lebendiges Farbschema mit Farben mit hoher Sättigung, einem sauberen Layout und einem ansprechenden Design mit Unterstützung des Dunkelmodus. Die Komponente enthält Eingabefelder für E-Mails, eine Schaltfläche "Senden" und hilfreichen Text. Das Design verwendet Materialdesignprinzipien wie Kartenansicht, Rasterlayout und Tiefeneffekte.