Компонент кнопок OAuth
Веб-компонент с кнопками OAuth, выполненными в скевоморфном стиле, адаптивными эффектами и поддержкой темных тем с использованием Tailwind CSS.
HTML-код
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Sign in with</h2>
<div class="grid grid-cols-1 gap-4">
<a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/40" alt="Google" class="mr-2 rounded-full">
<span class="font-medium text-gray-800 dark:text-gray-200">Google</span>
</a>
<a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Facebook" class="mr-2 rounded-full">
<span class="font-medium text-gray-800 dark:text-gray-200">Facebook</span>
</a>
<a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/46.jpg" alt="Twitter" class="mr-2 rounded-full">
<span class="font-medium text-gray-800 dark:text-gray-200">Twitter</span>
</a>
</div>
</div>Связанные компоненты
Компонент кнопок OAuth
Простой, отзывчивый компонент кнопок OAuth, выполненный в скевоморфном стиле с яркой цветовой гаммой, адаптированный для платформ электронной коммерции и поддерживающий темный режим.
Компонент кнопок OAuth
Сложный веб-компонент для кнопок OAuth, стилизованный под стеклянные и земляные тона, разработанный для бизнес/корпоративных сайтов с поддержкой адаптивности и темного режима.
Компонент кнопок OAuth
Адаптивный компонент кнопок OAuth, предназначенный для темного режима с яркой цветовой гаммой, подходит для профессиональных бизнес-сайтов.