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.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 dark:from-blue-900 dark:to-purple-800 p-6 rounded-lg shadow-lg transform transition-all duration-300 ease-in-out hover:scale-105">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
<h2 class="text-3xl font-semibold text-center text-blue-600 dark:text-blue-400">Reset Your Password</h2>
<p class="text-center text-gray-600 dark:text-gray-300 mb-6">Enter your email address to receive a link to reset your password.</p>
<form>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
<input type="email" id="email" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" placeholder="[email protected]">
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 text-white font-semibold py-2 px-4 rounded-md transition duration-200">Send Password Reset Link</button>
</form>
<div class="mt-4 text-center">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Go back to login</a>
</div>
</div>
<div class="mt-6 flex justify-center">
<img src="https://picsum.photos/60" alt="User Avatar" class="rounded-full border-4 border-white dark:border-gray-800">
</div>
</div>
Componenti correlati
Componente di reimpostazione della password
Componente di reimpostazione della password con design Skeuomorphism, effetti reattivi e supporto per temi scuri.
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.
Reimpostazione della password pastello skeuomorfa
Un componente web reattivo per la reimpostazione della password progettato con un'estetica Skeuomorphism, caratterizzata da tenui colori pastello. L'interfaccia è complessa, con più elementi interattivi dettagliati attraverso effetti 3D, ombre e trame sottili create con Tailwind CSS. Include un modulo per l'inserimento di e-mail e un pulsante "Invia link di ripristino" ben visibile, insieme a collegamenti secondari. Il tema scuro è supportato. Ideale per vetrine portfolio.