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

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

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

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

HTML-код

<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>

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

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

Сложный компонент сброса пароля, предназначенный для государственных и государственных служб, отличается чистым, минималистичным дизайном, основанным на типографике, с высокой контрастностью цветов и полной отзывчивостью, включая поддержку темного режима.

Открытый

Retro_Crypto_Password_Reset_Component

Сложный компонент сброса пароля в стиле ретро/винтаж, разработанный для криптовалют и блокчейн-приложений, с многоступенчатым взаимодействием, адаптивным макетом и поддержкой темного режима.

Открытый

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

Яркий компонент сброса паролей в 3D-стиле для блогов и потребления контента. Он поддерживает темную тему и богат интерактивными элементами.

Открытый