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

소셜 로그인 구성 요소

미니멀한 플랫 디자인, 반응형 효과와 어두운 테마 지원을 특징으로 하는 소셜 로그인 구성 요소입니다.

미리 보기

HTML 코드

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-xs">
        <h2 class="text-center text-lg font-semibold text-gray-900 dark:text-gray-100">Login with</h2>
        <div class="mt-4 flex justify-around w-full">
            <button class="flex items-center justify-center w-1/3 p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
                <img src="https://picsum.photos/24/24?random=1" alt="Google Logo" class="mr-2 rounded-full">
                Google
            </button>
            <button class="flex items-center justify-center w-1/3 p-2 bg-gray-700 text-white rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-opacity-50">
                <img src="https://picsum.photos/24/24?random=2" alt="Facebook Logo" class="mr-2 rounded-full">
                Facebook
            </button>
        </div>
        <div class="mt-4 text-center">
            <span class="text-gray-500 dark:text-gray-400">or</span>
        </div>
        <input type="email" placeholder="Email" class="mt-4 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
        <input type="password" placeholder="Password" class="mt-2 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
        <button class="mt-4 w-full p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            Log In
        </button>
        <p class="mt-2 text-center text-gray-600 dark:text-gray-400 text-sm">
            Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign up</a>
        </p>
    </div>
</div>

관련 구성 요소

소셜 로그인 구성 요소

스큐어모픽 디자인, 흙색, 다크 모드를 지원하는 반응형 레이아웃을 갖춘 간단한 소셜 로그인 구성 요소입니다. 이 구성 요소는 블로그 또는 콘텐츠 소비 웹 사이트에 적합하며 시각적으로 매력적이고 사용자 친화적인 로그인 경험을 제공합니다.

열다

소셜 로그인 구성 요소

이벤트 및 컨퍼런스 웹 사이트를 위한 깨끗하고 신뢰할 수 있는 소셜 로그인 구성 요소로, 멀티 컬러 그라데이션 테마와 다크 모드 지원을 제공합니다. 기업/전문가용으로 설계되었습니다.

열다

레트로 소셜 로그인 컴포넌트

포레스트/그린 색상 팔레트를 사용하여 레트로/빈티지 80년대/90년대 미학을 갖춘 간단하고 반응이 빠른 소셜 로그인 구성 요소입니다. 다크 모드 지원이 포함됩니다.

열다