Компонент кнопок OAuth
Набор кнопок OAuth, выполненных в брутальной эстетике и Tailwind CSS, с отзывчивыми эффектами и поддержкой темных тем.
HTML-код
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<h1 class="text-4xl font-extrabold text-black dark:text-white mb-5">Login with</h1>
<div class="flex space-x-4">
<a href="#" class="bg-blue-500 dark:bg-blue-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-400 dark:hover:bg-blue-600 transition-all duration-300 transform hover:scale-105">
<img src="https://picsum.photos/30?random=1" alt="OAuth Provider 1" class="inline-block mr-2 rounded-full">
Provider 1
</a>
<a href="#" class="bg-red-500 dark:bg-red-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-red-400 dark:hover:bg-red-600 transition-all duration-300 transform hover:scale-105">
<img src="https://picsum.photos/30?random=2" alt="OAuth Provider 2" class="inline-block mr-2 rounded-full">
Provider 2
</a>
<a href="#" class="bg-green-500 dark:bg-green-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-green-400 dark:hover:bg-green-600 transition-all duration-300 transform hover:scale-105">
<img src="https://picsum.photos/30?random=3" alt="OAuth Provider 3" class="inline-block mr-2 rounded-full">
Provider 3
</a>
</div>
</div>Связанные компоненты
Компонент «Кнопки OAuth» - акварель/художественный
Художественный компонент кнопок OAuth в ретро-стиле, разработанный для модных и косметических брендов. Имеет мягкие окрашенные текстуры, приглушенные винтажные цвета и включает варианты входа в Google, Apple и Facebook. Полностью адаптивный и поддерживает темный режим.
Компонент кнопок OAuth
Бруталистский компонент кнопок OAuth для портфолио с дополнительной цветовой гаммой. Отзывчивый с поддержкой темного режима.
Компонент кнопок OAuth
Отзывчивый компонент OAuth Buttons со скевоморфизмом, аналогичной цветовой схемой и сложными взаимодействиями, подходящий для интерфейсов социальных сетей. Включает поддержку темных тем и использует Tailwind CSS для стилизации, без JavaScript. Изображения предоставлены Lorem Picsum и RandomUser.me.