OAuth 버튼 구성 요소
포트폴리오용으로 설계된 뉴모피즘으로 스타일이 지정된 OAuth 인증 버튼용 웹 구성 요소로, 어두운 테마를 지원하는 반응형 레이아웃이 포함되어 있습니다.
HTML 코드
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="p-6 bg-white rounded-xl shadow-lg dark:bg-gray-800 dark:shadow-gray-700">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Connect with Us</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30?blur=1" alt="Google Logo" class="mr-3 rounded-full">
<span class="text-gray-700 dark:text-white">Sign in with Google</span>
</a>
<a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30?blur=1" alt="Facebook Logo" class="mr-3 rounded-full">
<span class="text-gray-700 dark:text-white">Sign in with Facebook</span>
</a>
<a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30?blur=1" alt="GitHub Logo" class="mr-3 rounded-full">
<span class="text-gray-700 dark:text-white">Sign in with GitHub</span>
</a>
</div>
</div>
</div>관련 구성 요소
OAuth 버튼 구성 요소
OAuth 로그인 버튼을 표시하기 위한 간단하고 깔끔하며 미니멀한 구성 요소로, 스위스/국제 타이포그래피 디자인 원칙을 준수합니다. 밝은 액센트 색상, 완전한 응답성 및 다크 모드 지원을 갖춘 흑백 단색이 특징이며 문서 또는 Wiki 사이트에 이상적입니다.