검색 구성 요소

카테고리

구성 요소 소셜 로그인

소셜 로그인

소셜 미디어 계정을 사용한 인증

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

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

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-lime-100 via-sky-100 to-fuchsia-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4 font-sans">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden backdrop-blur-sm bg-opacity-70 dark:bg-opacity-70 border border-lime-200 dark:border-gray-700 transform transition-all duration-300 hover:scale-105 group" style="box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), inset 0 0 50px rgba(255, 255, 255, 0.1);">
    <div class="relative p-8 text-center">
      <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10" style="background: radial-gradient(circle at center, #CCEEFF, transparent 70%), url('https://picsum.photos/600/400?blur=5') center center / cover no-repeat;"></div>
      <div class="relative z-10">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white capitalize leading-tight mb-2">
          Find Your Dream Home
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-6">
          Sign in to explore properties tailored for you.
        </p>
        <div class="space-y-4">
          <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold bg-gradient-to-r from-blue-500 to-blue-700 text-white shadow-xl hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition transform duration-300 active:scale-95 group-hover:drop-shadow-lg group-hover:scale-100 relative overflow-hidden group-hover:glow-blue" aria-label="Sign in with Facebook">
            <div class="absolute inset-0 bg-blue-500 opacity-20 pointer-events-none group-hover:neon-blue"></div>
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.812c-3.267 0-4.188 1.504-4.188 4.004v2.996z" />
            </svg>
            <span class="relative z-10">Continue with Facebook</span>
          </button>

          <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold bg-gradient-to-r from-red-500 to-red-700 text-white shadow-xl hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800 transition transform duration-300 active:scale-95 group-hover:drop-shadow-lg group-hover:scale-100 relative overflow-hidden group-hover:glow-red" aria-label="Sign in with Google">
            <div class="absolute inset-0 bg-red-500 opacity-20 pointer-events-none group-hover:neon-red"></div>
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 4.5c2.47 0 4.48 1.48 5.42 3.63L20.1 5.4C18.47 2.15 15.42 0 12 0 7.8 0 4.2 2.7 2.4 6.3l3.22 2.53C6.4 6.9 8.9 4.5 12 4.5zM24 12c0-.75-.07-1.49-.2-2.2L12 12V24h6c3.3 0 6-2.7 6-6 0-1.8-.8-3.4-2-4.5zM0 12c0 .75.07 1.49.2 2.2L12 12V0H6C2.7 0 0 2.7 0 6c0 1.8.8 3.4 2 4.5z" />
            </svg>
            <span class="relative z-10">Continue with Google</span>
          </button>
        </div>
        <p class="mt-6 text-xs text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-300">
          By signing in, you agree to our <a href="#" class="text-lime-600 dark:text-lime-400 font-medium hover:underline">Terms of Service</a> and <a href="#" class="text-lime-600 dark:text-lime-400 font-medium hover:underline">Privacy Policy</a>.
        </p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Neon Glow for Buttons */
  .group-hover\:neon-blue {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.8), inset 0 0 10px rgba(59, 130, 246, 0.5);
    transition: box-shadow 0.3s ease-in-out;
  }

  .group-hover\:neon-red {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.8), inset 0 0 10px rgba(239, 68, 68, 0.5);
    transition: box-shadow 0.3s ease-in-out;
  }

  /* Optional: Light glow for the card itself on hover */
  .group:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(255, 255, 255, 0.1), 0 0 30px rgba(163, 239, 59, 0.3) !important; /* Adding a subtle lime glow */
  }

  .dark .group:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 0 50px rgba(0, 0, 0, 0.2), 0 0 30px rgba(163, 239, 59, 0.3) !important;
  }
</style>

Art Deco Social 로그인 구성 요소

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

열다 미리 보기

                <div class="min-h-screen bg-gradient-to-br from-stone-100 to-stone-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-serif dark:from-stone-900 dark:to-stone-950">
  <div class="w-full max-w-md bg-white p-8 rounded-xl shadow-2xl dark:bg-stone-800 transition-all duration-300 transform scale-100 opacity-100">
    <div class="relative mb-8 text-center">
      <h2 class="text-4xl font-bold text-stone-800 dark:text-stone-100 mb-2 tracking-wider">Login</h2>
      <p class="text-stone-600 dark:text-stone-300 mb-6">Access your CRM dashboard</p>

      <!-- Art Deco Pattern Top -->
      <div class="absolute -top-6 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-gradient-to-r from-yellow-700 to-yellow-900 rounded-b-lg shadow-md"></div>
      <div class="absolute -top-8 left-1/2 -translate-x-1/2 w-2/3 h-1 bg-stone-300 dark:bg-stone-600 rounded-b-lg"></div>

      <!-- Art Deco geometric lines -->
      <div class="absolute inset-x-0 bottom-0 text-stone-300 dark:text-stone-600 text-sm opacity-50">
        <svg class="mx-auto" width="100%" height="20" viewBox="0 0 100 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 10H100" stroke="currentColor" stroke-width="0.5"/>
          <path d="M10 5L90 5" stroke="currentColor" stroke-width="0.5"/>
          <path d="M20 0L80 0" stroke="currentColor" stroke-width="0.5"/>
        </svg>
      </div>
    </div>

    <div class="space-y-4 mb-6">
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-lg bg-stone-100 border border-stone-300 text-stone-700 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-200 shadow-sm hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors duration-300">
        <img src="https://www.svgrepo.com/show/512317/google-177.svg" alt="Google logo" class="h-5 w-5 mr-3 filter dark:invert">
        <span class="font-medium">Sign in with Google</span>
      </button>
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-lg bg-stone-100 border border-stone-300 text-stone-700 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-200 shadow-sm hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors duration-300">
        <img src="https://www.svgrepo.com/show/303126/facebook-1-logo.svg" alt="Facebook logo" class="h-5 w-5 mr-3 filter dark:invert">
        <span class="font-medium">Sign in with Facebook</span>
      </button>
    </div>

    <div class="relative flex py-5 items-center">
      <div class="flex-grow border-t border-stone-300 dark:border-stone-600"></div>
      <span class="flex-shrink mx-4 text-stone-500 dark:text-stone-400 font-sans text-sm">Or continue with</span>
      <div class="flex-grow border-t border-stone-300 dark:border-stone-600"></div>
    </div>

    <form class="space-y-5">
      <div>
        <label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-200 mb-1">Email Address</label>
        <input type="email" id="email" name="email" class="mt-1 block w-full px-4 py-3 rounded-lg border border-stone-300 focus:ring-yellow-800 focus:border-yellow-800 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400 dark:focus:ring-yellow-700 dark:focus:border-yellow-700 shadow-sm text-base" placeholder="[email protected]">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-stone-700 dark:text-stone-200 mb-1">Password</label>
        <input type="password" id="password" name="password" class="mt-1 block w-full px-4 py-3 rounded-lg border border-stone-300 focus:ring-yellow-800 focus:border-yellow-800 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400 dark:focus:ring-yellow-700 dark:focus:border-yellow-700 shadow-sm text-base" placeholder="••••••••">
      </div>

      <div class="flex items-center justify-between text-sm">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-yellow-800 focus:ring-yellow-700 border-stone-300 rounded dark:border-stone-600 dark:bg-stone-700 dark:checked:bg-yellow-700 dark:focus:ring-offset-stone-800">
          <label for="remember-me" class="ml-2 block text-stone-700 dark:text-stone-300">Remember me</label>
        </div>
        <a href="#" class="font-medium text-yellow-800 hover:text-yellow-700 dark:text-yellow-600 dark:hover:text-yellow-500 transition-colors duration-200">Forgot your password?</a>
      </div>

      <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-medium text-white bg-yellow-800 hover:bg-yellow-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-700 dark:bg-yellow-700 dark:hover:bg-yellow-800 dark:focus:ring-offset-stone-800 transition-colors duration-300 tracking-wide">
        Sign In
      </button>
    </form>

    <p class="mt-8 text-center text-sm text-stone-600 dark:text-stone-300">
      Don't have an account?
      <a href="#" class="font-medium text-yellow-800 hover:text-yellow-700 dark:text-yellow-600 dark:hover:text-yellow-500 transition-colors duration-200">Sign up</a>
    </p>

    <!-- Art Deco Pattern Bottom -->
    <div class="relative mt-8">
      <div class="absolute -bottom-6 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-gradient-to-r from-yellow-700 to-yellow-900 rounded-t-lg shadow-md"></div>
      <div class="absolute -bottom-8 left-1/2 -translate-x-1/2 w-2/3 h-1 bg-stone-300 dark:bg-stone-600 rounded-t-lg"></div>

      <!-- Art Deco geometric lines -->
      <div class="absolute inset-x-0 top-0 text-stone-300 dark:text-stone-600 text-sm opacity-50 rotate-180">
        <svg class="mx-auto" width="100%" height="20" viewBox="0 0 100 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 10H100" stroke="currentColor" stroke-width="0.5"/>
          <path d="M10 5L90 5" stroke="currentColor" stroke-width="0.5"/>
          <path d="M20 0L80 0" stroke="currentColor" stroke-width="0.5"/>
        </svg>
      </div>
    </div>

  </div>
</div>

Neumorphic_Gaming_Social_Login_Component

어스 톤의 뉴모픽 스타일의 복잡하고 반응이 빠른 소셜 로그인 구성 요소로, 게임 웹 사이트용으로 설계되었습니다. 다양한 로그인 옵션과 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="min-h-screen bg-stone-200 dark:bg-stone-900 flex items-center justify-center p-4 sm:p-6 font-sans antialiased text-stone-800 dark:text-stone-300">
  <div class="w-full max-w-md p-6 sm:p-8 rounded-3xl bg-stone-200 dark:bg-stone-900 shadow-neu-light dark:shadow-neu-dark transition-all duration-300 relative overflow-hidden group">
    <div class="absolute inset-0 rounded-3xl bg-gradient-to-br from-stone-300/30 to-stone-100/30 dark:from-stone-800/30 dark:to-stone-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>

    <h2 class="text-3xl sm:text-4xl font-bold text-center mb-6 sm:mb-8 text-stone-700 dark:text-stone-200 drop-shadow-sm">
      <span class="block">Player Login</span>
      <span class="block text-sm sm:text-base font-normal mt-1 opacity-70">Join the Arena!</span>
    </h2>

    <div class="space-y-4 sm:space-y-5 mb-6">
      <button class="w-full py-3 px-6 rounded-xl flex items-center justify-center space-x-3 text-lg font-semibold bg-stone-200 dark:bg-stone-900 shadow-neu-inner-light dark:shadow-neu-inner-dark hover:shadow-neu-light hover:dark:shadow-neu-dark active:shadow-neu-inner-light active:dark:shadow-neu-inner-dark transition-all duration-300 text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.172 8.413 9.879v-6.988H7.078V12h2.335V9.75c0-2.322 1.41-3.592 3.49-3.592 1.002 0 1.98.074 1.98.074v2.16H13.6c-1.132 0-1.49.529-1.49 1.43v1.725h3.9L16 12h-3.328v6.988C18.343 21.172 22 16.991 22 12z" />
        </svg>
        <span>Login with Facebook</span>
      </button>

      <button class="w-full py-3 px-6 rounded-xl flex items-center justify-center space-x-3 text-lg font-semibold bg-stone-200 dark:bg-stone-900 shadow-neu-inner-light dark:shadow-neu-inner-dark hover:shadow-neu-light hover:dark:shadow-neu-dark active:shadow-neu-inner-light active:dark:shadow-neu-inner-dark transition-all duration-300 text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.24 10.29c-.35-.2-.79-.34-1.24-.34-1.16 0-2.22.61-2.92 1.63V7.9H5.06v8.1h2.92v-2.02c.7-.91 1.76-1.63 2.92-1.63 1.08 0 2.05.35 2.87 1.01 1.07.82 1.73 2.1 1.73 3.61c0 1.5-.66 2.79-1.73 3.61-.82.66-1.79 1.01-2.87 1.01-1.16 0-2.22-.61-2.92-1.63v2.02H5.06v-8.1h2.92V9.92c-.7.91-1.76 1.63-2.92 1.63-1.08 0-2.05-.35-2.87-1.01-1.07-.82-1.73-2.1-1.73-3.61c0-1.5.66-2.79 1.73-3.61.82-.66 1.79-1.01 2.87-1.01 1.16 0 2.22.61 2.92 1.63V4.9H5.06v8.1h2.92V7.9H5.06V4.9h2.92V2.9c0-1.72 1.34-3.12 3.01-3.12 1.34 0 2.45.69 3.05 1.76L16 2.6c-.6-.73-1.46-1.2-2.45-1.2-1.67 0-3.01 1.41-3.01 3.12z" />
        </svg>
        <span>Login with Google</span>
      </button>

      <button class="w-full py-3 px-6 rounded-xl flex items-center justify-center space-x-3 text-lg font-semibold bg-stone-200 dark:bg-stone-900 shadow-neu-inner-light dark:shadow-neu-inner-dark hover:shadow-neu-light hover:dark:shadow-neu-dark active:shadow-neu-inner-light active:dark:shadow-neu-inner-dark transition-all duration-300 text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M20.21 16.94c.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0 0 0 0 0 0 0 .0-.0 0-.0 0-.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .0-.0.0-.0.0-.0.0-.0.0-.0V14.1c0 0 0-.0-.0-.0c0-.0-.0-.0-.0-.0c.0-.0-.0-.0-.0-.0.0-.0.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0.0-.0.0-.0.0-.0.0-.0.0-.0V14.1zM12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zM12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zM12.91 16.974c-.032-.012-.064-.025-.096-.038-.035-.014-.07-.028-.105-.043-.03-.012-.06-.024-.09-.037-.035-.014-.07-.029-.105-.043-.033-.013-.066-.026-.099-.04-.04-.016-.08-.032-.12-.048-.034-.014-.068-.027-.101-.041-.04-.016-.079-.032-.119-.048-.034-.013-.069-.027-.103-.041-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.034-.013-.069-.027-.103-.041-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.018-.007-.036-.014-.054-.022-.02-.008-.04-.015-.06-.023C6.014 16.96 6.012 16.96 6.012 16.96h-.002c-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0 0 0 0 0 0 0 .0 0 .0-.0 .0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0C5.992 16.94 5.992 16.94 5.992 16.94h-.002c-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0 0 0 0 0 0 0 .0 0 .0-.0 .0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0S6.01 16.94 6.01 16.94z" />
        </svg>
        <span>Login with Apple</span>
      </button>
    </div>

    <div class="relative flex py-5 items-center mb-6">
      <div class="flex-grow border-t border-stone-400 dark:border-stone-700"></div>
      <span class="flex-shrink mx-4 text-stone-500 dark:text-stone-400 text-sm">Or use your Player ID</span>
      <div class="flex-grow border-t border-stone-400 dark:border-stone-700"></div>
    </div>

    <form class="space-y-5">
      <div class="relative">
        <input
          type="text"
          id="username"
          name="username"
          placeholder=""
          class="peer w-full px-4 py-3 rounded-xl bg-stone-200 dark:bg-stone-900 border border-transparent shadow-neu-inner-light dark:shadow-neu-inner-dark focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 transition-all duration-300 text-stone-800 dark:text-stone-300 placeholder-transparent"
          autocomplete="username"
        />
        <label
          for="username"
          class="absolute left-4 top-1/2 -translate-y-1/2 text-stone-500 dark:text-stone-400 text-base transition-all duration-300 ease-in-out
                   peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-stone-500 peer-placeholder-shown:dark:text-stone-400 peer-placeholder-shown:text-base
                   peer-focus:top-3 peer-focus:-translate-y-full peer-focus:text-xs peer-focus:text-amber-600 dark:peer-focus:text-amber-400"
        >
          Player ID or Email
        </label>
      </div>

      <div class="relative">
        <input
          type="password"
          id="password"
          name="password"
          placeholder=""
          class="peer w-full px-4 py-3 rounded-xl bg-stone-200 dark:bg-stone-900 border border-transparent shadow-neu-inner-light dark:shadow-neu-inner-dark focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 transition-all duration-300 text-stone-800 dark:text-stone-300 placeholder-transparent"
          autocomplete="current-password"
        />
        <label
          for="password"
          class="absolute left-4 top-1/2 -translate-y-1/2 text-stone-500 dark:text-stone-400 text-base transition-all duration-300 ease-in-out
                   peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-stone-500 peer-placeholder-shown:dark:text-stone-400 peer-placeholder-shown:text-base
                   peer-focus:top-3 peer-focus:-translate-y-full peer-focus:text-xs peer-focus:text-amber-600 dark:peer-focus:text-amber-400"
        >
          Password
        </label>
      </div>

      <div class="flex items-center justify-between text-sm sm:text-base">
        <div class="flex items-center">
          <input
            type="checkbox"
            id="remember-me"
            name="remember-me"
            class="h-4 w-4 text-amber-600 dark:text-amber-500 rounded border-stone-300 dark:border-stone-700 bg-stone-300 dark:bg-stone-700 focus:ring-amber-500 dark:focus:ring-amber-600 mr-2 shadow-neu-inner-light dark:shadow-neu-inner-dark transform scale-90 checked:scale-100 transition-all duration-200 cursor-pointer"
          />
          <label for="remember-me" class="text-stone-600 dark:text-stone-400 select-none">Remember me</label>
        </div>
        <a href="#" class="text-amber-600 dark:text-amber-500 hover:text-amber-700 dark:hover:text-amber-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 rounded-md py-0.5 px-1 -mx-1 -my-0.5">Forgot Password?</a>
      </div>

      <button type="submit" class="w-full py-3 px-6 rounded-xl font-bold text-lg bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white shadow-lg shadow-amber-500/50 dark:shadow-amber-700/50 hover:shadow-xl hover:shadow-amber-600/60 dark:hover:shadow-amber-800/60 transition-all duration-300 transform active:scale-98 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
        Login
      </button>
    </form>

    <p class="mt-8 text-center text-stone-600 dark:text-stone-400 text-sm sm:text-base">
      Don't have an account? 
      <a href="#" class="text-amber-600 dark:text-amber-500 hover:text-amber-700 dark:hover:text-amber-400 font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 rounded-md py-0.5 px-1 -mx-1 -my-0.5">Sign Up</a>
    </p>

    <!-- Decorative elements from Neumorphism principles -->
    <div class="absolute -top-8 -left-8 w-24 h-24 rounded-full bg-stone-300 dark:bg-stone-800 shadow-xl opacity-30 blur-md group-hover:top-4 group-hover:left-4 transition-all duration-700 pointer-events-none"></div>
    <div class="absolute -bottom-8 -right-8 w-32 h-32 rounded-full bg-amber-300 dark:bg-amber-800 shadow-xl opacity-20 blur-md group-hover:bottom-4 group-hover:right-4 transition-all duration-700 delay-100 pointer-events-none"></div>

  </div>
</div>

<style>
  /* Custom CSS for Neumorphism shadows */
  .shadow-neu-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neu-light {
    box-shadow: none; /* Disable light shadow in dark mode */
  }
  .shadow-neu-dark {
    box-shadow: none; /* Disable dark shadow in light mode */
  }
  .dark .shadow-neu-dark {
    box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #2a2a2a;
  }

  .shadow-neu-inner-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-neu-inner-light {
    box-shadow: none;
  }
  .shadow-neu-inner-dark {
    box-shadow: none;
  }
  .dark .shadow-neu-inner-dark {
    box-shadow: inset 5px 5px 10px #1c1c1c, inset -5px -5px 10px #2a2a2a;
  }

  /* Animated Label for input fields */
  .group.relative input:placeholder-shown + label,
  .peer:placeholder-shown + label {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem; /* Base size */
    color: theme('colors.stone.500');
  }

  .dark .group.relative input:placeholder-shown + label,
  .dark .peer:placeholder-shown + label {
    color: theme('colors.stone.400');
  }

  .group.relative input:focus + label,
  .peer:focus + label {
    top: 0.75rem; /* 12px from top */
    transform: translateY(-100%);
    font-size: 0.75rem; /* text-xs */
    color: theme('colors.amber.600');
  }

  .dark .group.relative input:focus + label,
  .dark .peer:focus + label {
    color: theme('colors.amber.400');
  }

   .peer:focus ~ .text-stone-500 {
      color: theme('colors.amber.600'); /* Change label color on focus */
   }
   .dark .peer:focus ~ .text-stone-500 {
      color: theme('colors.amber.400');
   }
</style>

소셜 로그인 구성 요소

마켓플레이스를 위한 복잡한 소셜 로그인 구성 요소로, 소셜 로그인 버튼, 이메일/비밀번호 필드, '비밀번호 찾기'/'가입' 링크를 제공합니다. 보석 톤, 완전한 반응성 및 다크 모드 지원을 사용하는 Material Design 원칙에 따라 설계되었습니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-lg">
    <div class="p-6 sm:p-8 lg:p-10">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 text-center">
        Welcome Back!
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-8 text-center">
        Log in to your marketplace account
      </p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 focus:ring-emerald-600 transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
            <path d="M22 12c0-1.04-.09-2.05-.25-3.03H12v6h5.8c-.28 1.95-1.16 3.59-2.66 4.67v3.08h2.64c1.55-1.46 2.45-3.54 2.45-5.92z" fill="#4285F4"/>
            <path d="M12 22c3.24 0 5.96-1.08 7.95-2.92l-2.64-3.08c-1.07.72-2.45 1.15-4.11 1.15-3.14 0-5.83-2.11-6.79-4.87H2.89v3.08C4.84 19.38 8.1 22 12 22z" fill="#34A853"/>
            <path d="M5.21 15.02c-.17-.5-.27-1.04-.27-1.61s.1-.94.27-1.44V8.89H2.89C2.26 10.15 2 11.51 2 13s.26 2.85.89 4.11L5.21 15.02z" fill="#FBBC05"/>
            <path d="M12 4.01c1.76 0 3.32.6 4.54 1.76l2.31-2.31C17.97 1.83 15.22 0 12 0 8.1 0 4.84 2.62 2.89 6.09l2.32 1.8C6.17 4.58 8.86 2.47 12 2.47z" fill="#EA4335"/>
          </svg>
          Google
        </button>
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 focus:ring-emerald-600 transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
            <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.96 3.65 9.09 8.42 9.87V14.6h-2.54V12h2.54V9.78c0-2.5 1.5-3.88 3.77-3.88 1.09 0 2.05.08 2.32.12v2.1l-1.24.01c-1.22 0-1.45.58-1.45 1.42V12h2.89l-.45 2.6h-2.44v7.27C18.35 21.09 22 16.96 22 12z" fill="#1877F2"/>
          </svg>
          Facebook
        </button>
      </div>

      <div class="relative flex py-5 items-center mb-6">
        <div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
        <span class="flex-shrink mx-4 text-gray-400 dark:text-gray-500 text-sm">Or continue with</span>
        <div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
      </div>

      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Email address
          </label>
          <div class="mt-1">
            <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-colors duration-200">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Password
          </label>
          <div class="mt-1">
            <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-colors duration-200">
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 transition-colors duration-200">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300 transition-colors duration-200">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-sapphire-600 hover:bg-sapphire-700 dark:bg-sapphire-700 dark:hover:bg-sapphire-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 transition-colors duration-200" style="@apply bg-blue-700 hover:bg-blue-800 dark:bg-blue-600;">
            Sign in
          </button>
        </div>
      </form>

      <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
        Don't have an account? 
        <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300 transition-colors duration-200">
          Sign up
        </a>
      </p>
    </div>
  </div>
</div>

<style>
  /* Custom colors for jewel tones (tailwind.config.js usually handles this) */
  .bg-sapphire-600 {
    background-color: #2F599A; /* Example: A deep blue */
  }
  .hover\:bg-sapphire-700:hover {
    background-color: #264A81; /* Darker on hover */
  }
  .dark\:bg-sapphire-700 {
    background-color: #264A81;
  }
  .dark\:hover\:bg-sapphire-800:hover {
    background-color: #1D3A68;
  }
  .focus\:ring-sapphire-500:focus {
    --tw-ring-color: #3F6DAF;
  }

  .text-emerald-600 {
    color: #048C54; /* Example: A rich emerald green */
  }
  .hover\:text-emerald-500:hover {
    color: #037A47;
  }
  .dark\:text-emerald-400 {
    color: #12B377;
  }
  .dark\:hover\:text-emerald-300:hover {
    color: #0FB16C;
  }
</style>

소셜 로그인 구성 요소

보색이 있는 단순하고 스큐어모픽한 소셜 로그인 구성 요소로, 블로그 또는 콘텐츠 사이트에 적합하며, 반응형이고 다크 모드를 지원하도록 설계되었습니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl bg-gradient-to-br from-indigo-200 to-purple-300 dark:from-indigo-800 dark:to-purple-900 border border-indigo-300 dark:border-purple-700
              transform transition-all duration-300 hover:scale-105 hover:shadow-2xl
              relative overflow-hidden group">

    <!-- Background Blips for Skeuomorphism -->
    <div class="absolute top-[-20px] left-[-20px] w-20 h-20 bg-indigo-400 dark:bg-purple-600 rounded-full opacity-30 blur-2xl group-hover:scale-150 transition-transform"></div>
    <div class="absolute bottom-[-20px] right-[-20px] w-24 h-24 bg-purple-400 dark:bg-indigo-600 rounded-full opacity-30 blur-2xl group-hover:scale-150 transition-transform"></div>

    <h2 class="text-center text-3xl font-extrabold text-indigo-900 dark:text-white mb-6
               relative drop-shadow-md">
      <span class="relative z-10">Login</span>
      <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full opacity-10 blur-xl"></span>
    </h2>

    <p class="text-center text-gray-700 dark:text-gray-300 mb-8">
      Join us to access exclusive content and features.
    </p>

    <div class="space-y-4">
      <!-- Google Button -->
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-xl
                     bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200
                     shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2
                     focus:ring-indigo-500 dark:focus:ring-purple-500
                     transform transition-all duration-200
                     hover:-translate-y-0.5 active:translate-y-0 active:shadow-md
                     border border-gray-200 dark:border-gray-700
                     relative overflow-hidden">
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-gray-50 to-gray-200 dark:from-gray-700 dark:to-gray-900 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3 z-10" viewBox="0 0 24 24" fill="currentColor">
          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h6.15c-.24 1.34-.9 2.45-1.92 3.23v2.8h3.69c2.16-2 3.42-4.93 3.42-8.24z" fill="#4285F4"></path>
          <path d="M12 23c3.27 0 6.02-1.08 8.03-2.91l-3.69-2.8c-1 .67-2.3 1.07-4.34 1.07-3.33 0-6.1-2.22-7.12-5.21H.9v2.87C2.98 20.58 7.15 23 12 23z" fill="#34A853"></path>
          <path d="M4.88 14.16c-.1-.3-.16-.62-.16-.96s.06-.66.16-.96V9.33H.9C.33 10.44 0 11.68 0 12.97s.33 2.53.9 3.64l3.98-3.9z" fill="#FBBC05"></path>
          <path d="M12 5.03c1.77 0 3.3.61 4.54 1.79l3.24-3.24C18.02 1.84 15.27 0 12 0 7.15 0 2.98 2.42.9 6.01l3.98 3.09c1.02-2.99 3.79-5.21 7.12-5.21z" fill="#EA4335"></path>
        </svg>
        <span class="font-semibold z-10">Sign in with Google</span>
      </button>

      <!-- Facebook Button -->
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-xl
                     bg-blue-600 dark:bg-blue-800 text-white
                     shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2
                     focus:ring-blue-500 dark:focus:ring-blue-700
                     transform transition-all duration-200
                     hover:-translate-y-0.5 active:translate-y-0 active:shadow-md
                     border border-blue-700 dark:border-blue-900
                     relative overflow-hidden">
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-blue-700 to-blue-500 dark:from-blue-900 dark:to-blue-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3 z-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
          <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.909c0-.818.062-1.491 1.092-1.491h2.908v-5h-4c-4.473 0-5 3.159-5 5.258v2.742z"></path>
        </svg>
        <span class="font-semibold z-10">Sign in with Facebook</span>
      </button>

      <!-- Email login option -->
      <div class="relative flex py-5 items-center">
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
        <span class="flex-shrink mx-4 text-gray-600 dark:text-gray-400 font-medium">Or</span>
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
      </div>

      <button class="w-full flex items-center justify-center py-3 px-4 rounded-xl
                     bg-indigo-600 dark:bg-purple-600 text-white
                     shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2
                     focus:ring-indigo-700 dark:focus:ring-purple-700
                     transform transition-all duration-200
                     hover:-translate-y-0.5 active:translate-y-0 active:shadow-md
                     border border-indigo-700 dark:border-purple-700
                     relative overflow-hidden">
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-700 to-purple-500 dark:from-purple-800 dark:to-indigo-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3 z-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
        <span class="font-semibold z-10">Sign in with Email</span>
      </button>
    </div>

    <p class="mt-8 text-center text-gray-700 dark:text-gray-300 text-sm">
      Don't have an account? 
      <a href="#" class="font-bold text-indigo-700 dark:text-purple-400 hover:underline
                          transform transition-colors duration-200 hover:text-indigo-900 dark:hover:text-purple-300">
        Sign up
      </a>
    </p>
  </div>
</div>

소셜 로그인 구성 요소

그레이스케일의 Glassmorphism 스타일의 소셜 로그인 구성 요소로, 전자 상거래 사이트에 적합한 다크 모드를 지원합니다. 디자인은 반응형이며 젖빛 유리 효과와 흐림을 포함합니다. JavaScript는 포함되어 있지 않습니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md p-8 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl shadow-5xl border border-opacity-30 border-white dark:bg-gray-800 dark:bg-opacity-20 dark:border-gray-700 mx-4">
    <div class="absolute inset-0 rounded-2xl pointer-events-none" style="background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-white text-center mb-6">Social Login</h2>
      <p class="text-gray-600 dark:text-gray-300 text-center mb-8">Sign in to unlock exclusive shopping features.</p>

      <div class="space-y-4">
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
          <img src="https://www.google.com/images/branding/googleg/1x/googleg_standard_color_64dp.png" alt="Google icon" class="h-6 w-6 mr-3">
          Sign in with Google
        </button>
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
          <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Facebook_Logo_%282019%29.png" alt="Facebook icon" class="h-6 w-6 mr-3">
          Sign in with Facebook
        </button>
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
          <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Twitter-logo.png" alt="Twitter icon" class="h-6 w-6 mr-3">
          Sign in with Twitter
        </button>
      </div>

      <div class="mt-8 text-center">
        <p class="text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="text-gray-800 dark:text-white font-medium hover:underline">Sign up</a></p>
      </div>
    </div>
  </div>
</div>

소셜 로그인 구성 요소

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

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 p-8 rounded-xl shadow-2xl border-t border-l border-stone-200 dark:border-stone-600 transform transition-all duration-300 hover:scale-105 active:scale-95">
    <h2 class="text-center text-stone-800 dark:text-stone-100 text-2xl font-semibold mb-6 drop-shadow-md">Join Us</h2>
    <div class="space-y-4">
      <button class="w-full flex items-center justify-center bg-brown-500 hover:bg-brown-600 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-brown-400 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://www.google.com/images/branding/googleg/2x/googleg_standard_color_64dp.png" alt="Google icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Google
      </button>
      <button class="w-full flex items-center justify-center bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1024px-2021_Facebook_icon.svg.png" alt="Facebook icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Facebook
      </button>
      <button class="w-full flex items-center justify-center bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/X_logo_2023.svg/512px-X_logo_2023.svg.png" alt="X icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with X
      </button>
    </div>
    <p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
      By joining, you agree to our <a href="#" class="text-brown-600 hover:text-brown-700 dark:text-brown-400 dark:hover:text-brown-500 font-medium">Terms of Service</a>.
    </p>
  </div>
</div>

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

열다 미리 보기

                <section class="min-h-screen flex items-center justify-center px-4 py-12 bg-gray-50 dark:bg-gray-900">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden grid grid-cols-1 md:grid-cols-2">
    <!-- Illustration Section -->
    <div class="hidden md:block">
      <img src="https://picsum.photos/seed/dashboard/800/600" alt="Dashboard Illustration" class="object-cover w-full h-full">
    </div>
    <!-- Login Form Section -->
    <div class="px-6 py-8 sm:px-10">
      <h2 class="text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">Sign in to your Dashboard</h2>
      <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">Use your social account or email</p>
      <!-- Social Login Buttons -->
      <div class="mt-8 grid grid-cols-3 gap-3">
        <button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
          <span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">G</span>
          <span class="ml-2">Google</span>
        </button>
        <button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
          <span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">T</span>
          <span class="ml-2">Twitter</span>
        </button>
        <button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
          <span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">GH</span>
          <span class="ml-2">GitHub</span>
        </button>
      </div>
      <!-- Divider -->
      <div class="relative mt-6">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
        </div>
      </div>
      <!-- Email & Password Form -->
      <form class="mt-6 space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
          <div class="mt-1">
            <input id="email" type="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </div>
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <div class="mt-1">
            <input id="password" type="password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </div>
        </div>
        <div class="flex items-center justify-between">
          <label class="flex items-center">
            <input id="remember_me" type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 focus:ring-gray-500">
            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Remember me</span>
          </label>
          <div class="text-sm">
            <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Forgot your password?</a>
          </div>
        </div>
        <div>
          <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">Sign in</button>
        </div>
      </form>
      <p class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Sign up</a></p>
    </div>
  </div>
</section>

Material Design 소셜 로그인 컴포넌트

보색 구성표가 있는 머티리얼 디자인 소셜 로그인 구성 요소, 블로그/콘텐츠 목적의 중간 정도의 복잡성, Tailwind CSS를 사용하여 다크 모드 지원으로 반응합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md w-96">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Login</h2>
    <div class="flex flex-col space-y-4">
      <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
        <img class="h-5 w-5 mr-2" src="https://fonts.gstatic.com/s/i/productlogos/google/v6/24px.svg" alt="Google logo">
        Sign in with Google
      </button>
      <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0C5.373 0 0 5.373 0 12c0 5.083 3.791 9.362 8.75 10l-.002-.002v-.001l.002.001V17h-3v-5h3V9c0-3.306 1.976-5.164 4.936-5.164C15.232 3.836 16.5 4 16.5 4v3h-2.473c-1.742 0-2.527.873-2.527 2.075V12h4.999l-.649 5h-4.35v5.999c5-.638 8.75-4.918 8.75-10C24 5.373 18.627 0 12 0z" />
        </svg>
        Sign in with Facebook
      </button>
    </div>
    <div class="mt-6 text-center text-gray-600 dark:text-gray-400 text-sm">
      Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a>
    </div>
  </div>
</div>

소셜 로그인 구성 요소

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

열다 미리 보기

                <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>