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.
HTML-Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 dark:from-blue-900 dark:to-purple-800 p-6 rounded-lg shadow-lg transform transition-all duration-300 ease-in-out hover:scale-105">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
<h2 class="text-3xl font-semibold text-center text-blue-600 dark:text-blue-400">Reset Your Password</h2>
<p class="text-center text-gray-600 dark:text-gray-300 mb-6">Enter your email address to receive a link to reset your password.</p>
<form>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
<input type="email" id="email" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" placeholder="[email protected]">
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 text-white font-semibold py-2 px-4 rounded-md transition duration-200">Send Password Reset Link</button>
</form>
<div class="mt-4 text-center">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Go back to login</a>
</div>
</div>
<div class="mt-6 flex justify-center">
<img src="https://picsum.photos/60" alt="User Avatar" class="rounded-full border-4 border-white dark:border-gray-800">
</div>
</div>
Verwandte Komponenten
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.
Komponente zum Zurücksetzen des Kennworts
Komponente zum Zurücksetzen des Passworts mit Neumorphismus-Stil, komplementärem Farbschema, komplexer Komplexität, für Social-Media-Zwecke, mit Tailwind CSS. Responsives Design mit Unterstützung für dunkle Themen.
Retro_Crypto_Password_Reset_Component
Eine komplexe Komponente zum Zurücksetzen von Passwörtern im Retro-/Vintage-Stil, die für Kryptowährungs- und Blockchain-Anwendungen entwickelt wurde und sich durch mehrstufige Interaktion, responsives Layout und Unterstützung für den Dunkelmodus auszeichnet.