Componente di reimpostazione della password - Retro / Vibrant Dashboard
Un componente per la reimpostazione della password in stile retrò-vintage con colori vivaci, adatto per un cruscotto. Presenta un design reattivo e il supporto del tema scuro utilizzando Tailwind CSS. Il design evoca l'estetica degli anni '80/'90.
Codice HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 max-w-md w-full border-4 border-purple-500 dark:border-teal-400 transform -rotate-3 hover:rotate-0 transition-transform duration-300">
<div class="text-center mb-8">
<h2 class="text-4xl font-bold text-gray-800 dark:text-white font-mono mb-2">RESET <span class="text-purple-600 dark:text-teal-400">PASSWORD</span></h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">Enter your email to receive a password reset link.</p>
</div>
<form>
<div class="mb-6">
<label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2 uppercase tracking-wider">Email Address</label>
<input type="email" id="email" class="shadow appearance-none border-4 border-yellow-400 dark:border-rose-500 rounded-lg w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-teal-600 bg-gray-200 dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 transition-all duration-300" placeholder="[email protected]">
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white font-extrabold py-3 px-6 rounded-full focus:outline-none focus:shadow-outline transform skew-x-12 hover:skew-x-0 transition-all duration-300 text-lg uppercase tracking-widest">
Send Link
</button>
<a href="#" class="inline-block align-baseline font-bold text-sm text-purple-600 dark:text-teal-400 hover:text-purple-800 dark:hover:text-teal-200 transition-colors duration-300">
Remembered your password?
</a>
</div>
</form>
<div class="mt-8 text-center text-gray-500 dark:text-gray-400 text-xs">
<p>©2023 RETRO CORP. All rights reserved. <span class="text-pink-500 dark:text-yellow-300">Stay Awesome!</span></p>
</div>
</div>
</div>
Componenti correlati
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 in stile 3D per blog e consumo di contenuti. Supporta il tema scuro ed è ricco di elementi interattivi.
Componente di reimpostazione della password
Un semplice componente per la reimpostazione della password progettato utilizzando i principi di Material Design con una combinazione di colori in scala di grigi. È reattivo e supporta la modalità oscura.