소셜 로그인 구성 요소
대시보드용으로 설계된 반응형 다크 모드 소셜 로그인 구성 요소로, 트라이어딕 색 구성표와 풍부한 대화형 요소를 특징으로 합니다. 여기에는 다양한 소셜 플랫폼을 통한 로그인 옵션, 사용자 데이터 시각화 및 컨트롤이 포함됩니다.
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>관련 구성 요소
소셜 로그인 구성 요소
그레이스케일 색상과 마이크로인터랙션 디자인 스타일을 사용하는 간단하고 반응이 빠른 소셜 로그인 구성 요소로, Tailwind CSS를 사용하여 어두운 테마를 지원합니다. 소셜 아이콘을 위한 미묘한 호버 애니메이션이 특징입니다.
소셜 로그인 구성 요소
스큐어모픽 디자인, 흙색, 다크 모드를 지원하는 반응형 레이아웃을 갖춘 간단한 소셜 로그인 구성 요소입니다. 이 구성 요소는 블로그 또는 콘텐츠 소비 웹 사이트에 적합하며 시각적으로 매력적이고 사용자 친화적인 로그인 경험을 제공합니다.