Componente Reimpostazione password - Glassmorphism Grayscale
Un componente di reimpostazione della password a tema glassmorphism con una combinazione di colori in scala di grigi, con campi di input e pulsanti traslucidi simili al vetro smerigliato. Progettato per la reattività e include il supporto per la modalità scura. Sebbene lo scopo sia il tempo/clima, il modulo di reimpostazione della password è generico.
Codice HTML
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 duration-300">
<div class="w-full max-w-md p-8 rounded-xl shadow-2xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 border border-gray-200 border-opacity-30 dark:border-gray-700 dark:border-opacity-30 transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-3xl">
<h2 class="text-3xl font-extrabold text-center text-gray-800 dark:text-gray-100 mb-6 drop-shadow-md">Reset Password</h2>
<p class="text-center text-gray-700 dark:text-gray-300 mb-8 max-w-sm mx-auto drop-shadow-sm">Enter your email address below and we'll send you a link to reset your password.</p>
<form class="space-y-6">
<div>
<label for="email" class="sr-only">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required class="block w-full px-5 py-3 rounded-lg text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 border border-gray-300 border-opacity-50 dark:border-gray-600 dark:border-opacity-50 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm"
placeholder="[email protected]">
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-6 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white bg-gray-700 bg-opacity-80 dark:bg-gray-600 dark:bg-opacity-80 hover:bg-gray-800 hover:bg-opacity-90 dark:hover:bg-gray-700 dark:hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out transform active:scale-95">
Send Reset Link
</button>
</div>
</form>
<div class="mt-8 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">
Remember your password?
<a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:rounded-sm">
Log in
</a>
</p>
</div>
</div>
</div>Componenti correlati
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.
Componente di reimpostazione della password
Un componente di reimpostazione della password ispirato al Material Design per piattaforme di social media creato con Tailwind CSS. Presenta una combinazione di colori vivaci con colori ad alta saturazione, layout pulito e design reattivo con supporto per la modalità oscura. Il componente include campi di input per l'e-mail, un pulsante di invio e testo utile. Il design utilizza principi di progettazione dei materiali come l'elevazione delle carte, il layout della griglia e gli effetti di profondità.
Componente di reimpostazione della password
Un componente di reimpostazione della password pulito e affidabile progettato per siti Web di notizie e media aziendali/professionali, con neutri caldi, reattività e supporto per la modalità oscura.