Компонент входа через социальные сети
Отзывчивый компонент входа в социальные сети в темном режиме, разработанный для панели управления, с триадической цветовой схемой и богатыми интерактивными элементами. Он включает в себя варианты входа в систему с различными социальными платформами, визуализацию пользовательских данных и элементы управления.
HTML-код
<div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-6">
<h2 class="text-3xl font-bold mb-6">Login to Your Dashboard</h2>
<div class="bg-gray-800 rounded-lg shadow-lg p-8 w-full max-w-sm">
<div class="flex justify-between mb-4">
<span class="text-lg font-semibold">Sign in with:</span>
<img src="https://picsum.photos/30/30?random=1" alt="Avatar" class="rounded-full">
</div>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 transition duration-300">
<img class="mr-2" src="https://picsum.photos/30/30?random=2" alt="Facebook" /> Facebook
</a>
<a href="#" class="flex items-center justify-center bg-green-700 text-white font-bold py-2 px-4 rounded hover:bg-green-600 transition duration-300">
<img class="mr-2" src="https://picsum.photos/30/30?random=3" alt="Google" /> Google
</a>
<a href="#" class="flex items-center justify-center bg-red-700 text-white font-bold py-2 px-4 rounded hover:bg-red-600 transition duration-300">
<img class="mr-2" src="https://picsum.photos/30/30?random=4" alt="Twitter" /> Twitter
</a>
</div>
<div class="mt-6 text-center">
<span class="text-sm">Don't have an account? <a href="#" class="text-blue-400 hover:underline">Sign up</a></span>
</div>
</div>
<footer class="mt-6 text-gray-400 text-xs">
© 2023 Your Company. All rights reserved.
</footer>
</div>Связанные компоненты
Компонент входа через социальные сети - Neumorphism Vibrant Complex
Сложный, отзывчивый компонент формы входа в социальные сети, стилизованный под Neumorphism и яркие акценты с использованием Tailwind CSS, поддерживающий темный режим.
Компонент входа через социальные сети
Простой, отзывчивый компонент входа через социальные сети с использованием оттенков серого и стиля дизайна Microinteractions, с поддержкой темной темы с использованием Tailwind CSS. Имеет тонкую анимацию наведения для социальных иконок.
Компонент входа через социальные сети
Сложный, быстро реагирующий компонент входа через социальные сети, предназначенный для информационных панелей. Использует пользовательский интерфейс темного режима с цветовой схемой в оттенках серого. Включает в себя кнопки социальных сетей, форму электронной почты/пароля, переключатель «Запомнить меня» и разделитель с альтернативными вариантами входа. Полностью адаптивный с иллюстрациями изображений и использует Tailwind CSS с префиксом dark: для поддержки темной темы. JavaScript не нужен.