Componente di reimpostazione della password Brutalismo Cruscotto analogo complesso
Un componente di reimpostazione della password in stile brutalista per una dashboard, caratterizzato da un layout complesso, combinazione di colori analoga, reattività e supporto per la modalità oscura.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-6">
<div class="w-full max-w-md bg-yellow-300 dark:bg-yellow-700 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-8 space-y-6">
<h2 class="text-2xl font-bold text-black dark:text-white uppercase border-b-4 border-black dark:border-white pb-4">Reset Password</h2>
<p class="text-black dark:text-white text-sm font-mono">Enter your email address to receive a password reset link. This action cannot be undone.</p>
<div class="space-y-4">
<div>
<label for="email" class="block text-sm font-bold text-black dark:text-white uppercase mb-2">Email Address</label>
<input type="email" id="email" class="w-full p-3 border-4 border-black dark:border-white bg-orange-300 dark:bg-orange-700 text-black dark:text-white focus:outline-none focus:ring-0 focus:border-black dark:focus:border-white" placeholder="[email protected]">
</div>
<div class="flex items-center">
<input type="checkbox" id="remember" class="h-5 w-5 text-black dark:text-white border- काले dark:border-white focus:ring-0 rounded-none">
<label for="remember" class="ml-2 block text-sm text-black dark:text-white font-mono">Remember me (not recommended on shared computers)</label>
</div>
</div>
<button class="w-full bg-red-500 hover:bg-red-700 text-white font-bold py-3 px-4 border-4 border-black dark:border-white shadow-[6px_6px_0_0_#000] dark:shadow-[6px_6px_0_0_#fff] uppercase transition duration-300 ease-in-out transform active:translate-x-1 active:translate-y-1">
Send Reset Link
</button>
<div class="text-center text-sm">
<a href="#" class="font-bold text-red-700 dark:text-red-300 hover:underline uppercase">Back to Login</a>
</div>
</div>
</div>
Componenti correlati
Componente di reimpostazione della password
Un componente complesso e reattivo per la reimpostazione della password con uno stile di design monospace/sviluppatore, caratterizzato da una combinazione di colori in bianco e nero con un accento luminoso. Progettato per siti di documentazione/wiki, include il supporto per la modalità oscura e l'HTML semantico.
Componente di reimpostazione della password
Un componente reattivo per la reimpostazione della password con un'interfaccia utente in modalità scura, che utilizza una combinazione di colori analoga. Progettato per applicazioni di e-commerce.
Componente di reimpostazione della password
Un componente di reimpostazione della password complesso e reattivo con un design "organico/ispirato alla natura", combinazione di colori "Sunset/Warm tones", adatto per CRM/Business Tools. Include il supporto per la modalità oscura.