CCHub Logo CCHub Tailwind Collection
구성 요소 OAuth 버튼 OAuth 버튼 구성 요소

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 버튼 구성 요소 1

매력적인 애니메이션과 다크 모드를 지원하는 OAuth 버튼을 표시하는 구성 요소로, 디자인에 Tailwind CSS를 활용합니다. 버튼은 미묘한 마이크로 인터랙션으로 사용자 작업에 응답하며, 이미지는 임의의 플레이스홀더 소스에서 포함됩니다.

열다

OAuth 버튼 구성 요소

포트폴리오용으로 설계된 뉴모피즘으로 스타일이 지정된 OAuth 인증 버튼용 웹 구성 요소로, 어두운 테마를 지원하는 반응형 레이아웃이 포함되어 있습니다.

열다

OAuth 버튼 구성 요소(다크 모드 단색)

Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 OAuth 버튼 컴포넌트. 어두운 배경의 단색 구성표를 사용합니다.

열다