Komponenten Zurücksetzen des Passworts Komponente zum Zurücksetzen des Kennworts

Komponente zum Zurücksetzen des Kennworts

Eine Komponente zum Zurücksetzen des Kennworts, die in einem skeuomorphen Stil entwickelt wurde, Erdtöne für eine natürliche Ästhetik verwendet und für Dashboard-Anwendungen strukturiert ist. Es unterstützt den Dunkelmodus und ist reaktionsschnell.

Vorschau

HTML-Code

<div class="max-w-md mx-auto mt-10 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Reset Your Password</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Please enter your email address to receive a password reset link.</p>
    <form>
        <div class="mb-4">
            <label for="email" class="block text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
            <input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="[email protected]" required />
        </div>
        <div class="mb-4">
            <label for="new-password" class="block text-gray-700 dark:text-gray-300 mb-2">New Password</label>
            <input type="password" id="new-password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="Enter new password" required />
        </div>
        <div class="mb-4">
            <label for="confirm-password" class="block text-gray-700 dark:text-gray-300 mb-2">Confirm Password</label>
            <input type="password" id="confirm-password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="Re-enter new password" required />
        </div>
        <button type="submit" class="w-full py-3 bg-green-500 hover:bg-green-600 text-white rounded-lg transition duration-200">Reset Password</button>
    </form>
    <div class="mt-4 text-center">
        <p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Log in</a></p>
    </div>
</div>

Verwandte Komponenten

Komponente zum Zurücksetzen des Kennworts

Eine reaktionsschnelle Komponente zum Zurücksetzen von Passwörtern mit Neumorphism-Design, Unterstützung für den Dunkelmodus und ohne JavaScript.

Offen

Komponente zum Zurücksetzen des Kennworts

Eine einfache Komponente zum Zurücksetzen des Passworts, die nach den Prinzipien des Material Designs mit einem Graustufen-Farbschema entwickelt wurde. Es ist reaktionsschnell und unterstützt den Dunkelmodus.

Offen

Komponente zum Zurücksetzen des Passworts - Retro/Vibrant Dashboard

Eine Komponente zum Zurücksetzen von Passwörtern im Retro-Vintage-Stil mit leuchtenden Farben, die sich für ein Armaturenbrett eignet. Es verfügt über ein responsives Design und Unterstützung für dunkle Themen mit Tailwind CSS. Das Design erinnert an die Ästhetik der 80er/90er Jahre.

Offen