Компонент входа через социальные сети
Компонент входа в социальные сети в стиле ретро/винтаж с поддержкой темного режима, отзывчивым дизайном и ностальгической эстетикой 80-х/90-х годов.
HTML-код
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-sm w-full text-center">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome Back!</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">Login with your favorite social media account</p>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center space-x-2 border-2 border-blue-500 rounded-lg py-2 hover:bg-blue-500 hover:text-white transition duration-300">
<img src="https://picsum.photos/24/24" alt="Facebook Avatar" class="rounded-full">
<span class="font-semibold">Login with Facebook</span>
</a>
<a href="#" class="flex items-center justify-center space-x-2 border-2 border-red-500 rounded-lg py-2 hover:bg-red-500 hover:text-white transition duration-300">
<img src="https://picsum.photos/24/24" alt="Google Avatar" class="rounded-full">
<span class="font-semibold">Login with Google</span>
</a>
<a href="#" class="flex items-center justify-center space-x-2 border-2 border-yellow-500 rounded-lg py-2 hover:bg-yellow-500 hover:text-white transition duration-300">
<img src="https://picsum.photos/24/24" alt="Twitter Avatar" class="rounded-full">
<span class="font-semibold">Login with Twitter</span>
</a>
</div>
<div class="mt-6">
<span class="text-gray-500 dark:text-gray-400">Or login with your email</span>
</div>
<input type="email" placeholder="Email" class="mt-2 w-full p-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500">
<input type="password" placeholder="Password" class="mt-2 w-full p-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500">
<button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg py-2 transition duration-300">Login</button>
</div>
<div class="mt-4 text-gray-500 dark:text-gray-400">
<span>Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></span>
</div>
</div>Связанные компоненты
Компонент входа через социальные сети
Адаптивный компонент входа через социальные сети с микровзаимодействиями - ориентирован на небольшие, привлекательные анимации, которые реагируют на действия пользователя, дополнительная цветовая схема, простой уровень сложности, для целей блога/контента, с поддержкой темных тем.
Компонент входа через социальные сети
Социальный компонент входа в систему с индустриальной, сырьевой эстетикой с использованием холодных нейтральных цветов, подходящий для систем бронирования и бронирования. Он оснащен кнопками входа через социальные сети и разделителем с опцией ручного входа, все это отзывчиво и с поддержкой темного режима.
Компонент входа через социальные сети
Простой, отзывчивый компонент входа через социальные сети с использованием оттенков серого и стиля дизайна Microinteractions, с поддержкой темной темы с использованием Tailwind CSS. Имеет тонкую анимацию наведения для социальных иконок.