Komponente zum Zurücksetzen des Kennworts
Komponente zum Zurücksetzen des Passworts mit Retro/Vintage-Design, Farbschema in Erdtönen und komplexer Komplexitätsstufe für Business-/Corporate-Zwecke unter Verwendung von Tailwind CSS. Responsives Design mit Unterstützung für dunkle Themen. Kein JavaScript-Code erforderlich, nur HTML mit Tailwind-Klassen. Verwendung von picsum.photos für Bilder und randomuser.me für Avatare.
HTML-Code
<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900">
<div class="px-8 py-6 mx-4 mt-4 text-left bg-earth-200 dark:bg-earth-800 shadow-lg md:w-1/3 lg:w-1/3 sm:w-1/3 rounded-lg border dark:border-stone-700 border-earth-300">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20 text-stone-600 dark:text-stone-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 7V14" />
</svg>
</div>
<h3 class="text-2xl font-bold text-center text-stone-800 dark:text-stone-200">Reset Password</h3>
<form action="">
<div class="mt-4">
<div>
<label class="block text-stone-700 dark:text-stone-300" for="email">Email</label>
<input type="text" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-stone-600 dark:focus:ring-stone-400 border-stone-300 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-200"
>
</div>
<div class="mt-4">
<label class="block">
<a href="#" class="text-sm text-stone-600 dark:text-stone-400 hover:underline">Forgot Password?</a>
</label>
</div>
<div class="flex items-baseline justify-between">
<button class="px-6 py-2 mt-4 text-white bg-stone-600 dark:bg-stone-400 rounded-lg hover:bg-stone-900 dark:hover:bg-stone-600">Reset</button>
</div>
</div>
</form>
</div>
</div>Verwandte Komponenten
Komponente zum Zurücksetzen des Kennworts
Eine reaktionsschnelle Komponente zum Zurücksetzen von Passwörtern mit einem Monospace-/Entwicklerdesign, einem herbstlichen Farbschema und einer Terminalästhetik, die für E-Commerce-Anwendungen geeignet ist. Enthält Unterstützung für den Dunkelmodus.
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.
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.