Компонент кнопок 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 в ретро-стиле, разработанный для модных и косметических брендов. Имеет мягкие окрашенные текстуры, приглушенные винтажные цвета и включает варианты входа в Google, Apple и Facebook. Полностью адаптивный и поддерживает темный режим.
Компонент кнопок OAuth
Отзывчивый компонент OAuth Buttons со скевоморфизмом, аналогичной цветовой схемой и сложными взаимодействиями, подходящий для интерфейсов социальных сетей. Включает поддержку темных тем и использует Tailwind CSS для стилизации, без JavaScript. Изображения предоставлены Lorem Picsum и RandomUser.me.
Компонент кнопок OAuth
Отзывчивый компонент кнопок OAuth, разработанный для темного режима с аналогичной цветовой схемой, с множеством интерактивных элементов для социальных сетей.