OAuth 버튼 구성 요소
블로그 또는 콘텐츠 소비 플랫폼용으로 설계된 Neumorphism 스타일의 OAuth Buttons 구성 요소입니다. 이 구성 요소에는 반응형 디자인, 어두운 테마 지원 및 단색 색 구성표를 갖춘 다양한 OAuth 공급자용 버튼이 있습니다.
HTML 코드
<div class="flex flex-col items-center justify-center h-screen bg-gray-200 dark:bg-gray-800 p-4">
<h2 class="text-gray-800 dark:text-gray-200 font-semibold text-2xl mb-6">Sign in with</h2>
<div class="space-y-4">
<a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
<img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200">Provider 1</span>
</a>
<a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
<img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200">Provider 2</span>
</a>
<a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
<img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200">Provider 3</span>
</a>
</div>
</div>
<style>
.shadow-neumorphism {
box-shadow: 5px 5px 15px rgba(255, 255, 255, 0.2),
-5px -5px 15px rgba(0, 0, 0, 0.2);
}
</style>관련 구성 요소
OAuth 버튼 구성 요소
생동감 넘치는 색 구성표와 함께 스큐어모픽 스타일로 디자인된 단순하고 반응형 OAuth 버튼 구성 요소로, 전자 상거래 플랫폼에 맞게 조정되고 다크 모드를 지원합니다.
OAuth 버튼 구성 요소(다크 모드 단색)
Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 OAuth 버튼 컴포넌트. 어두운 배경의 단색 구성표를 사용합니다.