Componente di reimpostazione della password
Un componente minimalista e reattivo per la reimpostazione della password con toni caldi e al tramonto, adatto per siti Web di cibo/ristoranti, incluso il supporto della modalità oscura.
Codice HTML
<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-orange-50 to-red-100 dark:from-gray-900 dark:to-gray-800 font-sans">
<div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8 space-y-6 transform transition-all duration-300 hover:shadow-2xl">
<div class="text-center">
<h2 class="mt-2 text-3xl font-extrabold text-orange-600 dark:text-orange-400 capitalize drop-shadow-sm">Reset Your Password</h2>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">Enter your email address to receive a password reset link.</p>
</div>
<form class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email address</label>
<div class="mt-1">
<input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-transparent focus:border-orange-500 dark:focus:border-orange-400 sm:text-sm bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white transition-colors duration-200 ease-in-out">
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-700 dark:focus:ring-orange-500 transition-colors duration-200 ease-in-out transform hover:scale-105 active:scale-95">
Send Reset Link
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm">
<a href="#" class="font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300">
Remembered your password? 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 pulito e affidabile progettato per siti Web di notizie e media aziendali/professionali, con neutri caldi, reattività e supporto per la modalità oscura.
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.