Componenti Reimpostazione della password Componente di reimpostazione della password

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.

Anteprima

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

Un componente complesso e reattivo per la reimpostazione della password con uno stile di design scheumorfico, una combinazione di colori analoga (verdi/blu) e il supporto della modalità scura, adatto per applicazioni di criptovaluta/blockchain.

Aperto

Componente di reimpostazione della password

Componente di reimpostazione della password con stile neumorfismo, combinazione di colori complementari, complessità complessa, per scopi di social media, utilizzando Tailwind CSS. Design reattivo con supporto per temi scuri.

Aperto

Componente di reimpostazione della password

Componente di reimpostazione della password reattiva con supporto per la modalità oscura

Aperto