Компонент входа через социальные сети
Минималистичный компонент входа в социальные сети, разработанный с помощью Tailwind CSS, с чистыми пространствами и отзывчивыми эффектами как для светлых, так и для темных тем.
HTML-код
<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg p-8 w-96">
<h2 class="text-lg font-semibold text-center text-gray-800 dark:text-gray-200">Login with</h2>
<div class="mt-4">
<button class="flex items-center justify-center w-full p-2 mb-4 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition duration-200">
<img src="https://picsum.photos/20/20" alt="Google Logo" class="mr-2 rounded-full">
Google
</button>
<button class="flex items-center justify-center w-full p-2 mb-4 bg-gray-600 hover:bg-gray-700 text-white rounded-md transition duration-200">
<img src="https://randomuser.me/api/portraits/med/men/50.jpg" alt="Facebook Logo" class="mr-2 rounded-full">
Facebook
</button>
<button class="flex items-center justify-center w-full p-2 mb-4 bg-red-600 hover:bg-red-700 text-white rounded-md transition duration-200">
<img src="https://picsum.photos/20/20" alt="Twitter Logo" class="mr-2 rounded-full">
Twitter
</button>
</div>
<div class="text-center">
<p class="text-gray-600 dark:text-gray-300">or</p>
<a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600">Sign in with email</a>
</div>
</div>
</div>Связанные компоненты
Компонент входа через социальные сети
Компонент входа в социальные сети в стиле Glassmorphism в оттенках серого, с поддержкой темного режима, подходит для сайтов электронной коммерции. Дизайн отзывчивый и включает в себя эффекты матового стекла и размытия. JavaScript не включен.
Компонент входа через социальные сети
Адаптивный компонент входа через социальные сети, вдохновленный принципами Material Design, с высокой контрастностью цветов и поддержкой темного режима, подходит для развлекательных и медиа-платформ.
SocialLoginComponent (Компонент SocialLogin)
Адаптивный компонент входа в социальные сети, созданный с помощью Tailwind CSS, с тонкими микровзаимодействиями при наведении курсора и полной поддержкой темного режима. Использует простые иконки CDN для логотипов социальных сетей.