Компонент входа через социальные сети
Отзывчивый компонент входа в социальные сети в темном режиме, разработанный для панели управления, с триадической цветовой схемой и богатыми интерактивными элементами. Он включает в себя варианты входа в систему с различными социальными платформами, визуализацию пользовательских данных и элементы управления.
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>Связанные компоненты
Компонент входа через социальные сети
Компонент входа в социальные сети в стиле ретро/винтаж с поддержкой темного режима, отзывчивым дизайном и ностальгической эстетикой 80-х/90-х годов.
Компонент входа через социальные сети - Микровзаимодействия
Карточка компонента входа через социальные сети, использующая Tailwind CSS, с микровзаимодействиями на кнопках (эффект масштабирования при наведении/фокусе), отзывчивостью (максимальная ширина по центру) и поддержкой темных тем. Использует изображение-заполнитель из picsum.photos и встроенные SVG для значков социальных сетей. Нет JavaScript.
Компонент входа в социальные сети в стиле ар-деко
Сложный компонент входа через социальные сети, разработанный в стиле ар-деко для CRM/Business Tools, с геометрическими узорами, теплыми нейтральными тонами и полной отзывчивостью с поддержкой темного режима.