Компонент кнопок OAuth
Отзывчивый компонент кнопок OAuth, разработанный в темном режиме с использованием Tailwind CSS, с темным фоном и элементами пользовательского интерфейса, оптимизированными для сред с низким уровнем освещения.
HTML-код
<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
<div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-white text-2xl font-bold mb-4 text-center">Login with</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-between bg-red-600 text-white rounded-lg p-3 hover:bg-red-500 transition duration-300">
<div class="flex items-center">
<img src="https://picsum.photos/30/30" alt="Google" class="rounded-full mr-3" />
<span>Google</span>
</div>
<span>></span>
</a>
<a href="#" class="flex items-center justify-between bg-blue-600 text-white rounded-lg p-3 hover:bg-blue-500 transition duration-300">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Facebook" class="rounded-full mr-3" />
<span>Facebook</span>
</div>
<span>></span>
</a>
<a href="#" class="flex items-center justify-between bg-gray-600 text-white rounded-lg p-3 hover:bg-gray-500 transition duration-300">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Twitter" class="rounded-full mr-3" />
<span>Twitter</span>
</div>
<span>></span>
</a>
</div>
</div>
</div>Связанные компоненты
Компонент кнопок OAuth
Glassmorphism OAuth Buttons Component с отзывчивыми эффектами и поддержкой темных тем.
Компонент кнопок OAuth
Веб-компонент с кнопками OAuth, выполненными в скевоморфном стиле, адаптивными эффектами и поддержкой темных тем с использованием Tailwind CSS.
Компонент кнопок OAuth
Адаптивный компонент кнопок OAuth со стилем 3D-дизайна, поддержкой темной темы и изображениями-заполнителями. Компонент оснащен кнопками для Google, Facebook, Twitter и LinkedIn с эффектами наведения для глубины и вовлеченности.