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

소셜 로그인 구성 요소

그레이스케일 색상과 마이크로인터랙션 디자인 스타일을 사용하는 간단하고 반응이 빠른 소셜 로그인 구성 요소로, Tailwind CSS를 사용하여 어두운 테마를 지원합니다. 소셜 아이콘을 위한 미묘한 호버 애니메이션이 특징입니다.

미리 보기

HTML 코드 

<div class="flex min-h-screen items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm rounded-lg bg-white dark:bg-gray-800 p-6 shadow-md">
    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white mb-6">Login with Social Media</h2>
    <div class="flex justify-center space-x-4">
      <button aria-label="Login with Google" class="group flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 p-3 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200">
        <svg class="h-6 w-6 text-gray-700 dark:text-gray-300 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M7.189 12.001l-4.51 2.28L1.45 10.089zM10 12.001v3.15l5.735 3.175-.007-3.092zM10 8.85L15.728 5.725 15.735 2.634zM7.189 12.001H2.689v-3.15h4.5z" fill="#FFCC4D"></path><path d="M7.189 12.001l2.811-1.621v3.235zM15.735 12.001l-5.735 3.175-5.749-2.907z" fill="#1976D2"></path><path d="M7.189 12.001H2.689v-3.15h4.5z" fill="#4CAF50"></path><path d="M15.728 5.725L10 8.85 7.189 7.229zM15.735 12.001v3.15l-5.735 3.175z" fill="#F44336"></path><path d="M10 8.85l5.728-3.125 5.743 3.125L10 8.85z" fill="#E53935"></path><path d="M10 12.001l-2.811 1.621v3.235L10 18.488l5.735-3.175L10 12.001z" fill="#FFCC4D"></path><path d="M10 12.001l2.811 1.621v3.235L10 18.488l-5.749-2.907L10 12.001z" fill="#4CAF50"></path><path d="M10 8.85L4.265 5.725 4.258 2.634l5.742 3.125 5.728-3.125L10 8.85z" fill="#1976D2"></path>
        </svg>
      </button>
      <button aria-label="Login with Facebook" class="group flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 p-3 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200">
        <svg class="h-6 w-6 text-gray-700 dark:text-gray-300 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.0228 5.65715 21.2108 10.4319 21.9491V14.8906H7.53379V12H10.4319V9.31156C10.4319 6.33506 12.2252 4.61273 14.9875 4.61273C16.3815 4.61273 17.6106 4.86996 17.9986 4.90543V7.56192L16.3412 7.56298C14.9162 7.56298 14.6415 8.24465 14.6415 9.16964V12H17.85L17.3426 14.8894H14.6415V21.9491C19.354 21.1944 22 17.0516 22 12Z"></path>
        </svg>
      </button>
      <button aria-label="Login with Twitter" class="group flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 p-3 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200">
        <svg class="h-6 w-6 text-gray-700 dark:text-gray-300 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.714 11.24H16.92L10.59 11.702 2.1 22.75H8.413l5.182-7.17L6.547 2.25H2.416L10.719 13.3L18.244 2.25zM17.291 19.75H15.026L5.41 4.25H7.68L17.291 19.75z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

관련 구성 요소

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

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

열다

Neumorphic 그레이스케일 소셜 로그인

그레이스케일의 Neumorphism 디자인 스타일을 사용하는 반응형 소셜 로그인 구성 요소입니다. 소셜 제공자를 위한 버튼, 구분 기호, 가입/비밀번호 분실 링크가 포함되어 있습니다. Tailwind의 dark: 접두사를 사용하여 다크 모드를 지원합니다. 대시보드 환경을 위해 설계되었습니다.

열다

소셜 로그인 구성 요소

정부/공공 서비스 웹 사이트에 적합한 고정 폭 글꼴, 따뜻한 중성 색 구성표가 있는 깨끗하고 코드에서 영감을 받은 소셜 로그인 구성 요소입니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.

열다