Componente di reimpostazione della password
Componente di reimpostazione della password con design retrò / vintage, combinazione di colori dei toni della terra e livello di complessità complesso, per scopi aziendali / aziendali, utilizzando Tailwind CSS. Design reattivo con supporto per temi scuri. Non è necessario alcun codice JavaScript, solo HTML con le classi Tailwind. Utilizzo di picsum.photos per le immagini e randomuser.me per gli avatar.
Codice HTML
<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>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 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.
Componente di reimpostazione della password
Componente di reimpostazione della password scheumorfica per i social media con combinazione di colori analoga e supporto per la modalità scura.