Компоненты Вход через социальные сети Компонент входа через социальные сети

Компонент входа через социальные сети

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

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

HTML-код

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Login with Social Media</h2>
        <div class="flex flex-col space-y-4">
            <button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="Google Logo"> Login with Google
            </button>
            <button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="Facebook Logo"> Login with Facebook
            </button>
            <button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="LinkedIn Logo"> Login with LinkedIn
            </button>
        </div>
        <div class="mt-4 text-center text-gray-600 dark:text-gray-400">
            <p>Or login with your email</p>
        </div>
        <div class="mt-4 flex flex-col space-y-4">
            <input type="email" placeholder="Email" class="border dark:border-gray-700 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" />
            <input type="password" placeholder="Password" class="border dark:border-gray-700 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" />
            <button class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-lg transition duration-200">Login</button>
        </div>
    </div>
</div>

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

Компонент входа через социальные сети

Компонент Social Login с материальным дизайном, пастельными тонами и умеренной сложностью для бизнеса/корпорации

Открытый

Компонент входа через социальные сети

Сложный, быстро реагирующий компонент входа через социальные сети, предназначенный для информационных панелей. Использует пользовательский интерфейс темного режима с цветовой схемой в оттенках серого. Включает в себя кнопки социальных сетей, форму электронной почты/пароля, переключатель «Запомнить меня» и разделитель с альтернативными вариантами входа. Полностью адаптивный с иллюстрациями изображений и использует Tailwind CSS с префиксом dark: для поддержки темной темы. JavaScript не нужен.

Открытый

Компонент входа через социальные сети - Neumorphism Vibrant Complex

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

Открытый