CCHub Logo CCHub Tailwind Collection
구성 요소 소셜 로그인 소셜 로그인 구성 요소

소셜 로그인 구성 요소

단색 색 구성표를 사용하는 다크 모드용으로 설계된 반응형 소셜 로그인 구성 요소입니다. 대화형 기능을 통해 블로그 및 콘텐츠 소비에 적합합니다.

미리 보기

HTML 코드 

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4 text-center">Log in with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Twitter</span>
        </a>
    </div>
    <p class="mt-4 text-center text-gray-400">Or, <a href="#" class="text-gray-300 hover:underline">create a new account</a></p>
</div>

관련 구성 요소

Art Deco Social 로그인 구성 요소

CRM/비즈니스 도구를 위한 아르데코 미학으로 디자인된 복잡한 소셜 로그인 구성 요소로, 기하학적 패턴, 따뜻한 뉴트럴 컬러, 다크 모드 지원을 통한 완벽한 반응성을 특징으로 합니다.

열다

소셜 로그인 구성 요소

대시보드를 위해 설계된 복잡하고 반응이 빠른 소셜 로그인 구성 요소입니다. 회색 음영 색 구성표가 있는 어두운 모드 UI를 활용합니다. 소셜 공급자 버튼, 이메일/비밀번호 양식, "내 정보 저장" 토글 및 대체 로그인 옵션이 있는 구분 기호가 있습니다. 이미지 일러스트레이션으로 완벽하게 반응하며 어두운 테마 지원을 위해 dark: 접두사가 있는 Tailwind CSS를 사용합니다. JavaScript가 필요하지 않습니다.

열다

소셜 로그인 구성 요소 - 미시적 상호작용

Tailwind CSS를 사용하는 소셜 로그인 구성 요소 카드로, 버튼의 마이크로 상호 작용(호버/포커스의 확대/축소 효과), 응답성(중앙 최대 너비) 및 어두운 테마 지원을 제공합니다. picsum.photos의 자리 표시자 이미지와 소셜 아이콘에 포함된 SVG를 사용합니다. 자바스크립트가 없습니다.

열다