Компонент кнопок OAuth
Веб-компонент с кнопками OAuth со стилем 3D-дизайна, адаптивными эффектами, поддержкой темных тем и изображениями-заполнителями.
HTML-код
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Sign in with</h1>
<div class="flex space-x-4">
<a href="#" class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-blue-700 dark:text-gray-200 flex items-center">
<img src="https://picsum.photos/20/20" alt="Google Avatar" class="rounded-full mr-2">
Google
</a>
<a href="#" class="bg-gray-800 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-gray-900 dark:text-gray-200 flex items-center">
<img src="https://picsum.photos/20/20" alt="Facebook Avatar" class="rounded-full mr-2">
Facebook
</a>
<a href="#" class="bg-red-600 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-red-700 dark:text-gray-200 flex items-center">
<img src="https://picsum.photos/20/20" alt="Twitter Avatar" class="rounded-full mr-2">
Twitter
</a>
</div>
</div>Связанные компоненты
Компонент «Кнопки OAuth» (темный режим, монохроматический)
Адаптивный компонент OAuth Buttons с поддержкой темного режима с использованием Tailwind CSS. Использует однотонную цветовую гамму с темным фоном.
Компонент кнопок OAuth
Glassmorphism OAuth Buttons Component с отзывчивыми эффектами и поддержкой темных тем.
Компонент кнопок OAuth
Отзывчивый компонент кнопок OAuth, разработанный для темного режима с аналогичной цветовой схемой, с множеством интерактивных элементов для социальных сетей.