OAuth 버튼 구성 요소
3D 디자인 스타일, 반응형 효과, 어두운 테마 지원 및 자리 표시자 이미지가 있는 OAuth 버튼을 특징으로 하는 웹 구성 요소입니다.
HTML 코드
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Sign in with</h1>
<div class="flex space-x-4">
<a href="#" class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-blue-700 dark:text-gray-200 flex items-center">
<img src="https://picsum.photos/20/20" alt="Google Avatar" class="rounded-full mr-2">
Google
</a>
<a href="#" class="bg-gray-800 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-gray-900 dark:text-gray-200 flex items-center">
<img src="https://picsum.photos/20/20" alt="Facebook Avatar" class="rounded-full mr-2">
Facebook
</a>
<a href="#" class="bg-red-600 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-red-700 dark:text-gray-200 flex items-center">
<img src="https://picsum.photos/20/20" alt="Twitter Avatar" class="rounded-full mr-2">
Twitter
</a>
</div>
</div>관련 구성 요소
OAuth 버튼 구성 요소
블로그 또는 콘텐츠 소비 플랫폼용으로 설계된 Neumorphism 스타일의 OAuth Buttons 구성 요소입니다. 이 구성 요소에는 반응형 디자인, 어두운 테마 지원 및 단색 색 구성표를 갖춘 다양한 OAuth 공급자용 버튼이 있습니다.