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

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

블로그 또는 콘텐츠 소비 플랫폼용으로 설계된 Neumorphism 스타일의 OAuth Buttons 구성 요소입니다. 이 구성 요소에는 반응형 디자인, 어두운 테마 지원 및 단색 색 구성표를 갖춘 다양한 OAuth 공급자용 버튼이 있습니다.

열다

OAuth 버튼 구성 요소

3D 디자인 스타일, 반응형 효과, 어두운 테마 지원 및 자리 표시자 이미지가 있는 OAuth 버튼을 특징으로 하는 웹 구성 요소입니다.

열다

OAuth 버튼 구성 요소

레트로/빈티지/80년대/90년대 테마의 OAuth 버튼 구성 요소는 유사한 색 구성표, 적당한 복잡성, 소셜 미디어용, 다크 모드를 지원하는 반응형 디자인을 제공합니다. JS는 없으며 Tailwind 클래스가있는 HTML 만 있습니다.

열다