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
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.
Komponente zum Zurücksetzen des Passworts - Retro/Vibrant Dashboard
Eine Komponente zum Zurücksetzen von Passwörtern im Retro-Vintage-Stil mit leuchtenden Farben, die sich für ein Armaturenbrett eignet. Es verfügt über ein responsives Design und Unterstützung für dunkle Themen mit Tailwind CSS. Das Design erinnert an die Ästhetik der 80er/90er Jahre.
Komponente zum Zurücksetzen des Kennworts
Eine reaktionsschnelle Komponente zum Zurücksetzen von Passwörtern mit Neumorphism-Design, Unterstützung für den Dunkelmodus und ohne JavaScript.