OAuth 버튼 구성 요소
스큐어모픽 스타일로 디자인된 OAuth 버튼, 반응형 효과, Tailwind CSS를 사용한 어두운 테마 지원을 특징으로 하는 웹 컴포넌트입니다.
HTML 코드
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Sign in with</h2>
<div class="grid grid-cols-1 gap-4">
<a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/40" alt="Google" class="mr-2 rounded-full">
<span class="font-medium text-gray-800 dark:text-gray-200">Google</span>
</a>
<a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Facebook" class="mr-2 rounded-full">
<span class="font-medium text-gray-800 dark:text-gray-200">Facebook</span>
</a>
<a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/46.jpg" alt="Twitter" class="mr-2 rounded-full">
<span class="font-medium text-gray-800 dark:text-gray-200">Twitter</span>
</a>
</div>
</div>관련 구성 요소
OAuth 버튼 구성 요소
간단하고 반응이 빠른 OAuth 로그인 버튼 구성 요소는 스큐어모픽 디자인, 유사한 색 구성표 및 다크 모드를 지원하며 포럼/커뮤니티 플랫폼에 적합합니다.
OAuth 버튼 구성 요소
Tailwind CSS를 사용하여 다크 모드로 설계된 반응형 OAuth 버튼 컴포넌트로, 어두운 배경과 저조도 환경에 최적화된 UI 요소를 제공합니다.