소셜 로그인 구성 요소
마이크로인터랙션이 있는 반응형 소셜 로그인 컴포넌트 - 사용자 동작에 반응하는 작고 매력적인 애니메이션, 보색 구성표, 단순한 복잡성 수준, 블로그/콘텐츠 목적, 어두운 테마 지원에 중점을 둡니다.
HTML 코드
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Login</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@keyframes bounce-in {
0% {
transform: scale(0.5);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.animate-bounce-in {
animation: bounce-in 0.5s ease-out;
}
@keyframes wiggle {
0%, 100% {
transform: rotate(-3deg);
}
50% {
transform: rotate(3deg);
}
}
.hover\:animate-wiggle:hover {
animation: wiggle 0.3s ease-in-out infinite;
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center min-h-screen p-4">
<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md w-full max-w-sm animate-bounce-in">
<h2 class="text-2xl font-bold text-gray-700 dark:text-white mb-6 text-center">Login</h2>
<div class="flex justify-center space-x-4">
<!-- Google Login Button -->
<button class="flex items-center justify-center w-12 h-12 rounded-full bg-red-600 hover:bg-red-700 text-white transition-all duration-300 ease-in-out transform hover:scale-110 hover:animate-wiggle">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M7 11v2.4h3.9c-.2 1-1.2 3-3.9 3-2.3 0-4.2-1.9-4.2-4.2s1.9-4.2 4.2-4.2c1.7 0 2.9.8 3.5 1.3l2.7-2.7c-1.6-1.5-3.7-2.4-6.2-2.4-5.1 0-9.3 4.2-9.3 9.3s4.2 9.3 9.3 9.3c5 0 8.5-3.5 8.5-8.5 0-.6-.1-1.1-.2-1.7H7z"/>
</svg>
</button>
<!-- Facebook Login Button -->
<button class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-600 hover:bg-blue-700 text-white transition-all duration-300 ease-in-out transform hover:scale-110 hover:animate-wiggle">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c6.016 0 11-4.032 11-9s-4.984-9-11-9zm-2 16h-3v-6h3v6zm-5-6h3v6h-3v-6zm8 0h-3v6h3v-6zm-5-6h-3v2h3v-2zm-5 0h3v.001h-3v-.001zm8 0h-3v2h3v-2zm-5-4h-3v2h3v-2zm-5 0h3v2h-3v-2zm8 0h-3v2h3v-2z"/>
<path d="M17 8h-1.75c-.562 0-1.25.438-1.25 1.25V11h3l-.438 3H14v7h-3v-7H8v-3h3V9.25C11 7.453 12.453 6 14.25 6H17V8z"/>
</svg>
</button>
<!-- Twitter Login Button -->
<button class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition-all duration-300 ease-in-out transform hover:scale-110 hover:animate-wiggle">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.953 4.57a10.88 10.88 0 01-3.147.813A5.44 5.44 0 0024 2.49a10.903 10.903 0 01-3.477 1.333A5.44 5.44 0 0016.567 0c-3 0-5.44 2.44-5.44 5.44 0 .427.047.84.137 1.24C7.77 6.574 4.12 4.67 1.63 1.723a5.457 5.457 0 00-.733 2.745c0 1.893.963 3.564 2.428 4.543a5.337 5.337 0 01-2.465-.679c0 .022 0 .046 0 .067 0 2.646 1.882 4.853 4.373 5.342a5.46 5.46 0 01-2.46.092c.698 2.176 2.71 3.76 5.092 3.803A10.907 10.907 0 010 20.065c2.305 1.478 5.047 2.324 7.93 2.324 9.52 0 14.76-7.894 14.76-14.76 0-.225-.005-.45-.014-.675a10.525 10.525 0 002.57-2.654z"/>
</svg>
</button>
</div>
<p class="text-center text-gray-500 dark:text-gray-400 text-sm mt-6">Or login with email and password</p>
<!-- You would typically have email/password fields here -->
<div class="mt-4">
<input type="email" placeholder="Email" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-600 dark:border-gray-500 dark:text-white">
</div>
<div class="mt-4">
<input type="password" placeholder="Password" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-600 dark:border-gray-500 dark:text-white ">
</div>
<button class="w-full bg-blue-600 text-white py-2 rounded-md mt-6 hover:bg-blue-700 transition-colors duration-300">Login</button>
</div>
</body>
</html>관련 구성 요소
소셜 로그인 구성 요소
포레스트 그린 색상 팔레트가 있는 간단하고 깨끗하며 반응이 빠른 소셜 로그인 구성 요소로, 뉴스/저널리즘 웹사이트용으로 설계되었으며 타이포그래피와 그리드 시스템을 강조합니다. 다크 모드 지원이 포함됩니다.
소셜 로그인 구성 요소
머티리얼 디자인(Material Design) 원칙에서 영감을 받은 복잡한 소셜 로그인 구성 요소로, 풍부한 보석 톤, 반응형 레이아웃, 소셜 네트워킹 인터페이스에 대한 다크 모드 지원을 특징으로 합니다.