OAuth 버튼 구성 요소
매력적인 애니메이션과 흙색 색상으로 디자인된 반응형 OAuth 버튼 구성 요소로, 소셜 미디어 인터페이스에 적합하고 어두운 테마를 지원합니다.
HTML 코드
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<h2 class="text-2xl font-bold text-green-700 dark:text-green-400 mb-4 animate-pulse">Sign in with</h2>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-brown-600 rounded-lg shadow-md hover:shadow-lg dark:bg-brown-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="Google Logo" class="w-6 h-6 rounded-full mr-2" />
Google
</button>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-blue-600 rounded-lg shadow-md hover:shadow-lg dark:bg-blue-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/26.jpg" alt="Facebook Logo" class="w-6 h-6 rounded-full mr-2" />
Facebook
</button>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-gray-700 rounded-lg shadow-md hover:shadow-lg dark:bg-gray-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Twitter Logo" class="w-6 h-6 rounded-full mr-2" />
Twitter
</button>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-orange-600 rounded-lg shadow-md hover:shadow-lg dark:bg-orange-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="GitHub Logo" class="w-6 h-6 rounded-full mr-2" />
GitHub
</button>
</div>관련 구성 요소
OAuth 버튼 구성 요소
스큐어모피즘 디자인, 유사한 색 구성표 및 복잡한 상호 작용을 갖춘 반응형 OAuth 버튼 구성 요소로, 소셜 미디어 인터페이스에 적합합니다. 어두운 테마 지원을 포함하며 JavaScript 없이 스타일링을 위해 Tailwind CSS를 사용합니다. 이미지 출처: Lorem Picsum 및 RandomUser.me.