Компоненты Кнопки OAuth Компонент кнопок OAuth

Компонент кнопок OAuth

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

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

HTML-код

<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="p-6 bg-white rounded-xl shadow-lg dark:bg-gray-800 dark:shadow-gray-700">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Connect with Us</h2>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="Google Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with Google</span>
            </a>
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="Facebook Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with Facebook</span>
            </a>
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="GitHub Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with GitHub</span>
            </a>
        </div>
    </div>
</div>

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

Компонент кнопок OAuth

Простой, отзывчивый компонент кнопок OAuth с акварельным/художественным стилем, крутой нейтральной цветовой гаммой, подходит для приложений электронной коммерции. Включает поддержку темного режима.

Открытый

Компонент кнопок OAuth

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

Открытый

Компонент кнопок OAuth

Компонент кнопок OAuth на тему ретро/винтаж/80-х/90-х годов с аналогичной цветовой схемой, средней сложности, для социальных сетей, адаптивный дизайн с поддержкой темного режима. Никакого JS, только HTML с классами Tailwind.

Открытый