Componenti Reimpostazione della password Componente di reimpostazione della password

Componente di reimpostazione della password

Un componente per la reimpostazione della password dal design minimalista e piatto con toni della terra, design reattivo e supporto per temi scuri, su misura per i contenuti del blog.

Anteprima

Codice HTML

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 text-center">Reset Password</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Enter your email address to receive a link to create a new password.</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
                <input type="email" id="email" class="bg-gray-100 dark:bg-gray-700 border rounded-lg w-full h-12 px-4 focus:outline-none focus:ring focus:ring-green-300" required>
            </div>
            <button type="submit" class="w-full bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-300">Send Reset Link</button>
        </form>
        <div class="mt-6 text-center">
            <p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Login here</a></p>
        </div>
    </div>
</div>

Componenti correlati

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.

Aperto