Компоненты Компоненты аутентификации Компоненты аутентификации

Компоненты аутентификации

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

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

HTML-код

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-gray-700 dark:bg-gray-700 p-6 rounded-lg shadow-xl w-full max-w-lg">
        <h1 class="text-3xl font-bold text-white mb-4">Join Our Community</h1>
        <div class="mb-4">
            <label for="email" class="block text-sm font-medium text-white">Email</label>
            <input type="email" id="email" class="mt-1 block w-full p-2 bg-gray-800 dark:bg-gray-800 text-white border border-gray-700 rounded-md focus:ring focus:ring-yellow-400" placeholder="[email protected]" required>
        </div>
        <div class="mb-4">
            <label for="password" class="block text-sm font-medium text-white">Password</label>
            <input type="password" id="password" class="mt-1 block w-full p-2 bg-gray-800 dark:bg-gray-800 text-white border border-gray-700 rounded-md focus:ring focus:ring-yellow-400" placeholder="********" required>
        </div>
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
                <input type="checkbox" id="remember" class="h-4 w-4 text-yellow-500 border-gray-300 rounded focus:ring focus:ring-yellow-400">
                <label for="remember" class="ml-2 block text-sm text-white">Remember me</label>
            </div>
            <a href="#" class="text-sm text-yellow-400 hover:underline">Forgot Password?</a>
        </div>
        <button class="w-full py-2 px-4 bg-yellow-500 hover:bg-yellow-400 text-white font-bold rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-300">Sign In</button>
        <div class="my-4 text-center"><span class="text-white">or</span></div>
        <button class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 flex items-center justify-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2"> Sign in with Google
        </button>
        <p class="mt-4 text-sm text-white text-center">
            Don't have an account? 
            <a href="#" class="text-yellow-400 hover:underline">Sign Up</a>
        </p>
    </div>
</div>

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

Минималистичная форма аутентификации

Отзывчивый, минималистичный компонент формы входа, предназначенный для портфолио или веб-приложений. Он отличается плоской эстетикой дизайна с дополняющей цветовой гаммой: синий используется для интерактивных элементов в светлом режиме, а оранжевый — в темном. Форма включает в себя поля для адреса электронной почты и пароля, опцию «запомнить меня», ссылку «забыли пароль», возможность регистрации и интеграцию входа через социальные сети (например, GitHub). Он поддерживает темную тему и создан исключительно с помощью HTML и Tailwind CSS для легкой интеграции.

Открытый