구성 요소 소셜 로그인 소셜 로그인 구성 요소

소셜 로그인 구성 요소

Tailwind CSS로 디자인된 미니멀한 소셜 로그인 구성 요소로, 밝은 테마와 어두운 테마 모두에 대한 깨끗한 공간과 반응형 효과를 제공합니다.

미리 보기

HTML 코드

<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
    <div class="bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-lg font-semibold text-center text-gray-800 dark:text-gray-200">Login with</h2>
        <div class="mt-4">
            <button class="flex items-center justify-center w-full p-2 mb-4 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition duration-200">
                <img src="https://picsum.photos/20/20" alt="Google Logo" class="mr-2 rounded-full">
                Google
            </button>
            <button class="flex items-center justify-center w-full p-2 mb-4 bg-gray-600 hover:bg-gray-700 text-white rounded-md transition duration-200">
                <img src="https://randomuser.me/api/portraits/med/men/50.jpg" alt="Facebook Logo" class="mr-2 rounded-full">
                Facebook
            </button>
            <button class="flex items-center justify-center w-full p-2 mb-4 bg-red-600 hover:bg-red-700 text-white rounded-md transition duration-200">
                <img src="https://picsum.photos/20/20" alt="Twitter Logo" class="mr-2 rounded-full">
                Twitter
            </button>
        </div>
        <div class="text-center">
            <p class="text-gray-600 dark:text-gray-300">or</p>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600">Sign in with email</a>
        </div>
    </div>
</div>

관련 구성 요소

소셜 로그인 구성 요소 - Neumorphism Vibrant Complex

Tailwind CSS를 사용하여 Neumorphism과 생생한 악센트로 스타일링된 복잡하고 반응이 빠른 소셜 로그인 양식 구성 요소로, 다크 모드를 지원합니다.

열다

소셜 로그인 구성 요소 - 부동산(수채화/네온)

부동산 플랫폼을 위한 간단하고 반응이 빠른 소셜 로그인 구성 요소로, 네온/일렉트릭 색 구성표가 있는 수채화/예술적 스타일을 특징으로 합니다. 다크 모드 지원 및 시맨틱 HTML이 포함됩니다.

열다

소셜 로그인 구성 요소

머티리얼 디자인, 파스텔 색상 및 비즈니스/기업을 위한 적당한 복잡성을 가진 소셜 로그인 구성 요소

열다