Компоненты Сброс пароля Компонент сброса пароля

Компонент сброса пароля

Минималистичный и плоский дизайн компонента сброса пароля с земляными тонами, адаптивным дизайном и поддержкой темных тем, адаптированный для контента блога.

Предварительный просмотр

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>

Связанные компоненты

Компонент сброса пароля

Отзывчивый компонент сброса пароля с дизайном Neumorphism, поддержкой темного режима и отсутствием JavaScript.

Открытый

Компонент сброса пароля

Минималистичный компонент сброса пароля с адаптивным дизайном и поддержкой темной темы с использованием Tailwind CSS.

Открытый

Компонент сброса пароля

Компонент сброса пароля с дизайном скевоморфизма, отзывчивыми эффектами и поддержкой темных тем.

Открытый