검색 구성 요소

카테고리

구성 요소 소셜 로그인

소셜 로그인

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

소셜 로그인 구성 요소

시원한 중성색을 사용하는 산업적, 원자재 미학을 가진 소셜 로그인 구성 요소로, 예약 및 예약 시스템에 적합합니다. 소셜 로그인 버튼과 수동 로그인 옵션이 있는 구분 기호가 있으며, 모두 반응이 빠르고 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-md p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 transform skew-y-1 -skew-x-1 sm:skew-y-0 sm:skew-x-0 relative overflow-hidden">
    <!-- Decorative metal plate effect -->
    <div class="absolute inset-0 bg-gradient-to-br from-gray-200 via-gray-300 dark:from-gray-700 dark:via-gray-600 to-gray-400 dark:to-gray-500 opacity-20 dark:opacity-10 transform -skew-y-6 skew-x-3 scale-125 pointer-events-none"></div>
    <div class="absolute inset-0 bg-gray-50 dark:bg-gray-800 opacity-70"></div>
    <div class="absolute z-10 p-6 sm:p-8 w-full h-full inset-0 flex flex-col justify-center">

      <h2 class="text-3xl sm:text-4xl font-extrabold text-center text-gray-800 dark:text-gray-100 mb-6 uppercase tracking-wider leading-tight animate-fade-in-down">
        Secure Your Spot
      </h2>
      <p class="text-center text-gray-600 dark:text-gray-300 mb-8 max-w-sm mx-auto animate-fade-in-up">
        Login or create an account to book your next reservation.
      </p>

      <div class="space-y-4 mb-8">
        <button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95 animate-slide-in-left">
          <svg class="h-5 w-5 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.447 18.064c-1.393-.243-2.613-.67-3.957-1.127a7.25 7.25 0 01-1.39-1.258c-.3-.263-.5-.487-.717-.743L12 9.043l-1.09.917c-.207.173-.41.343-.607.507-.22.18-.46.363-.733.543-.59.38-1.27.757-2.03.957-.497.123-.97.23-1.42.31l-.22.04v-2.73c.48-.073.96-.18 1.41-.31.75-.24 1.4-.57 1.9-.93.5-.36.9-.76 1.15-1.1s.4-1.04.4-1.3l.01-.01v-.01c0-.18.02-.37.05-.57l.01-.01c.04-.26.07-.48.07-.58v-.01h-.01c-.01-.01-.32-.23-.62-.48l-.01-.01c-.13-.1-.28-.2-.42-.3-.22-.16-.45-.3-.7-.41l-.01-.01c-.16-.08-.34-.14-.52-.19-.18-.05-.36-.08-.55-.08h-.01c-.15 0-.28 0-.41.01l-.01.01h-.01c-.12 0-.25.01-.38.01l-.01.01h-.01c-.26-.06-.52-.12-.78-.18l-.01-.01H3.6c-1.897 0-3.447 1.55-3.447 3.447v1.8c0 1.897 1.55 3.447 3.447 3.447h2.093c.27 0 .54-.01.81-.02l-.01-.01c.21-.02.42-.04.62-.07l-.01-.01c.21-.03.42-.06.63-.1l.01-.01c.19-.03.38-.07.57-.1l.01-.01c.19-.04.38-.08.57-.12l.01-.01c.18-.04.36-.08.54-.12l.01-.01c.18-.04.36-.09.54-.13l-.01-.01c.19-.04.38-.09.57-.14z" clip-rule="evenodd"/>
          </svg>
          Continue with Google
        </button>
        <button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95 animate-slide-in-right">
          <svg class="h-5 w-5 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M18.172 1.4C16.142 0.385 13.916 0 12 0S7.858.385 5.828 1.4C2.658 3.036 0 7.375 0 12c0 4.148 2.215 7.644 5.318 9.53a15.7 15.7 0 006.682 2.47c3.966 0 7.5-.762 9.074-2.128C21.782 19.123 24 15.688 24 12c0-4.625-2.658-8.964-5.828-10.6zM15.348 18.06c-1.393.243-2.613.67-3.957 1.127a7.25 7.25 0 01-1.39-1.258c-.3-.263-.5-.487-.717-.743L12 9.043l-1.09.917c-.207.173-.41.343-.607.507-.22.18-.46.363-.733.543-.59.38-1.27.757-2.03.957-.497.123-.97.23-1.42.31l-.22.04v-2.73c.48-.073.96-.18 1.41-.31.75-.24 1.4-.57 1.9-.93.5-.36.9-.76 1.15-1.1s.4-1.04.4-1.3l.01-.01v-.01c0-.18.02-.37.05-.57l.01-.01c.04-.26.07-.48.07-.58v-.01h-.01c-.01-.01-.32-.23-.62-.48l-.01-.01c-.13-.1-.28-.2-.42-.3-.22-.16-.45-.3-.7-.41l-.01-.01c-.16-.08-.34-.14-.52-.19-.18-.05-.36-.08-.55-.08h-.01c-.15 0-.28 0-.41.01l-.01.01h-.01c-.12 0-.25.01-.38.01l-.01.01h-.01c-.26-.06-.52-.12-.78-.18l-.01-.01H3.6c-1.897 0-3.447 1.55-3.447 3.447v1.8c0 1.897 1.55 3.447 3.447 3.447h2.093c.27 0 .54-.01.81-.02l-.01-.01c.21-.02.42-.04.62-.07l-.01-.01c.21-.03.42-.06.63-.1l.01-.01c.19-.03.38-.07.57-.1l.01-.01c.19-.04.38-.08.57-.12l.01-.01c.18-.04.36-.08.54-.12l.01-.01c.18-.04.36-.09.54-.13l-.01-.01c.19-.04.38-.09.57-.14z" clip-rule="evenodd" />
          </svg>
          Continue with Apple 
        </button>
      </div>

      <div class="relative mb-8">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <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 font-mono text-xs uppercase tracking-wider">
            OR
          </span>
        </div>
      </div>

      <form class="space-y-6">
        <div>
          <label for="email" class="sr-only">Email address</label>
          <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-base transition duration-300 ease-in-out transform focus:scale-[1.01] animate-fade-in-down-delay" placeholder="Email address" />
        </div>

        <div>
          <label for="password" class="sr-only">Password</label>
          <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-base transition duration-300 ease-in-out transform focus:scale-[1.01] animate-fade-in-down-delay-2" placeholder="Password" />
        </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-indigo-600 dark:text-indigo-400 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500 dark:focus:ring-indigo-400">
            <label for="remember-me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
              Remember me
            </label>
          </div>

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

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 dark:bg-indigo-700 hover:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 animate-fade-in-up-delay">
            Sign in
          </button>
        </div>
      </form>

      <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-300 animate-fade-in-up-delay-2">
        Not a member? 
        <a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300 transition duration-200 ease-in-out">
          Sign up now
        </a>
      </p>
    </div>
  </div>
</div>

<style>
/* Basic keyframe animations for simple entrance effects */
@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-down { animation: fade-in-down 0.6s ease-out forwards; }
.animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
.animate-slide-in-left { animation: slide-in-left 0.7s ease-out forwards; }
.animate-slide-in-right { animation: slide-in-right 0.7s ease-out forwards; }

/* Delays for staggered animations */
.animate-fade-in-down-delay { animation: fade-in-down 0.6s ease-out 0.3s forwards; opacity: 0; }
.animate-fade-in-down-delay-2 { animation: fade-in-down 0.6s ease-out 0.4s forwards; opacity: 0; }
.animate-fade-in-up-delay { animation: fade-in-up 0.6s ease-out 0.5s forwards; opacity: 0; }
.animate-fade-in-up-delay-2 { animation: fade-in-up 0.6s ease-out 0.6s forwards; opacity: 0; }
</style>

소셜 로그인 구성 요소

포레스트 그린 색상 팔레트가 있는 간단하고 깨끗하며 반응이 빠른 소셜 로그인 구성 요소로, 뉴스/저널리즘 웹사이트용으로 설계되었으며 타이포그래피와 그리드 시스템을 강조합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="flex items-center justify-center p-4 min-h-screen bg-gray-50 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-sm p-6 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800 transition-colors duration-300">
    <div class="text-center">
      <h2 class="text-2xl font-bold text-emerald-800 dark:text-emerald-300 mb-2 transition-colors duration-300">Sign In/Up</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm transition-colors duration-300">Access exclusive content and personalized news.</p>
    </div>

    <div class="space-y-3">
      <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-emerald-500 transition-colors duration-300">
        <svg class="w-4 h-4 mr-2 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.0003 12.723c3.309-1.01 5.922-4.103 5.922-7.857C17.9223 2.146 15.7063 0 12.9633 0c-3.15 0-5.877 2.155-5.877 4.887c0 3.754 2.613 6.847 5.922 7.857zM12.0003 18.003c-5.521 0-10.002-4.482-10.002-10.002S6.4793 0 12.0003 0s10.002 4.482 10.002 10.002-4.481 10.002-10.002 10.002zM12.0003 24c-6.627 0-12-5.373-12-12C0.0003 5.373 5.3733 0 12.0003 0s12 5.373 12 12c0 6.627-5.373 12-12 12zM12.0003 16.002c-4.417 0-8.001-3.584-8.001-8.001S7.5833 0 12.0003 0s8.001 3.584 8.001 8.001-3.584 8.001-8.001 8.001z"/>
          <path d="M12.0003 19.999c-3.313 0-6.001-2.688-6.001-6.001s2.688-6.001 6.001-6.001 6.001 2.688 6.001 6.001-2.688 6.001-6.001 6.001zM12.0003 24c-6.627 0-12-5.373-12-12C0.0003 5.373 5.3733 0 12.0003 0s12 5.373 12 12c0 6.627-5.373 12-12 12zM12.0003 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"/>
          <path d="M12.0003 15.002c-2.761 0-5.001-2.24-5.001-5.001s2.24-5.001 5.001-5.001 5.001 2.24 5.001 5.001-2.24 5.001-5.001 5.001zM12.0003 19.999c-3.313 0-6.001-2.688-6.001-6.001s2.688-6.001 6.001-6.001 6.001 2.688 6.001 6.001-2.688 6.001-6.001 6.001zM12.0003 24c-6.627 0-12-5.373-12-12C0.0003 5.373 5.3733 0 12.0003 0s12 5.373 12 12c0 6.627-5.373 12-12 12zM12.0003 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"/>
          <path d="M12.0003 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"/>
          <path d="m20.916 11.23a9.92 9.92 0 0 0-.022-.249c-.1-.703-.263-1.405-.512-2.09-.76-.02-1.523-.02-2.285 0-.469 1.1-.96 2.148-1.472 3.123.633.208 1.258.461 1.864.757.777-.735 1.4-1.564 1.89-2.541zm-15.066 0c.49.977 1.113 1.806 1.89 2.541.606-.296 1.23-.549 1.864-.757-.512-.975-1.003-2.023-1.472-3.123-.762-.02-1.525-.02-2.285 0-.249.686-.412 1.388-.512 2.09-.02.083-.027.166-.022.249zm1.312-3.136c.036-.076.07-.152.106-.226l-1.04-.602 1.455-.788c.37.52.813 1.002 1.326 1.44zm11.137-1.44l1.455.788-1.04.602c.036.074.07.15.106.226-.513-.438-.956-.92-1.326-1.44zm-7.382-2.012c.706 0 1.413 0 2.119 0-.027.702-.132 1.404-.326 2.09-.646.07-1.294.07-1.942 0-.194-.686-.299-1.388-.326-2.09zm.006 13.916c-.026-.686-.13-1.382-.322-2.07-.643-.07-1.284-.07-1.927 0-.192.688-.296 1.384-.322 2.07.703 0 1.407 0 2.571 0zm.014-4.218c-.512-.975-1.003-2.023-1.472-3.123-.633-.208-1.258-.461-1.864-.757.777.735 1.4 1.564 1.89 2.541.606.296 1.23.549 1.864.757zm4.304-.757a9.92 9.92 0 0 0-.022-.249c-.1-.703-.263-1.405-.512-2.09-.76-.02-1.523-.02-2.285 0-.469 1.1-.96 2.148-1.472 3.123.633.208 1.258.461 1.864.757.777-.735 1.4-1.564 1.89-2.541zm-10.748-1.127c-.49-.977-1.113-1.806-1.89-2.541-.606.296-1.23.549-1.864.757.512.975 1.003 2.023 1.472 3.123.762-.02 1.525-.02 2.285 0 .249-.686.412-1.388.512-2.09.02-.083.027-.166.022-.249zm-1.312 3.136c-.036.076-.07.152-.106.226l1.04.602-1.455.788c-.37-.52-.813-1.002-1.326-1.44zm-1.096-7.348c.026.686.13 1.382.322 2.07.643.07 1.284.07 1.927 0 .192-.688.296-1.384.322-2.07-.703 0-1.407 0-2.571 0z"/>
          <circle cx="12.0003" cy="4.9997" r="2.0001"/>
           <path d="m12.0003 12.0003c-2.209 0-4.0002-1.791-4.0002-4.0002s1.791-4.0002 4.0002-4.0002 4.0002 1.791 4.0002 4.0002-1.791 4.0002-4.0002 4.0002zm0 1.9999c-.735 0-1.41-.227-1.966-.607-.556-.38-.97-.905-1.233-1.503-.984-2.247-3.926-7.65-4.524-8.818-.28-.541-.448-1.272-.448-2.027 0-2.545 1.579-4.708 3.75-5.592.518-.21.997-.331 1.478-.331h.001c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.001.001-.001.001-.001.002-.001.001 0 .001 0 .002 0 .001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.001.001 0 .001 0 .002 0 .001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.001.001 0 .001 0 .002 0 .001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002c.001-.001c.001-.001.001-.001.002-.001c.001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002c.001-.001c.001-.001.001-.001.002-.001c.001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002c.001-.001c.001-.001.001-.001.002-.001c.001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02-.823-1.077-1.488-2.264-1.996-3.528-1.036-.337-2.12-.524-3.238-.524h-.001c-3.111 0-5.836 1.776-7.202 4.364-.475.86-.777 1.83-.895 2.845-.065.556 4.398 7.57 4.962 8.528.268.455.617.848 1.024 1.178.407.33.864.582 1.354.74h-.001c.001 0 .001.001.002.001.001 0 .001.001.002.001h.001c.001 0 .001.001.002.001.001 0 .001.001.002.001l.001.001c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c-.001 0-.001-.001-.002-.001l-.001 0c-.001 0-.001 0-.002 0h-.001z" fill="currentColor"/>
           <path d="m12 0c-3.15 0-5.877 2.155-5.877 4.887 0 3.754 2.613 6.847 5.922 7.857a6.0007 6.0007 0 0 1-.045.006c-3.313 0-6.001-2.688-6.001-6.001s2.688-6.001 6.001-6.001 6.001 2.688 6.001 6.001v-.001c0-3.754-2.613-6.847-5.922-7.857zm.0003 16.002c-4.417 0-8.001-3.584-8.001-8.001S7.5833 0 12.0003 0s8.001 3.584 8.001 8.001-3.584 8.001-8.001 8.001z" fill="currentColor"/>
        </svg>
        Continue 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-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-emerald-500 transition-colors duration-300">
        <svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0C5.373 0 0 5.373 0 12c0 5.084 3.78 9.388 8.718 10.375V14.06H5.443V12h3.275V9.387c0-3.23 1.957-5.021 4.877-5.021 1.397 0 2.457.25 2.79.362v2.666h-1.68C13.213 7.85 1.17 9.336 12.002 9.336l.002-.002V22.375C20.22 21.01 24 16.716 24 12c0-6.627-5.373-12-12-12z"/>
        </svg>
        Continue 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-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-emerald-500 transition-colors duration-300">
        <svg class="w-4 h-4 mr-2 text-black dark:text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.002 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12c0-6.627-5.373-12-12-12zm5.717 17.098c-.295.772-.888 1.493-1.636 2.115-.747.622-1.571 1.055-2.457 1.258-2.128.48-4.29.48-6.418 0-.886-.203-1.71-.636-2.457-1.258-.748-.622-1.341-1.343-1.636-2.115-.48-1.29-.48-2.58 0-3.87.295-.772.888-1.493 1.636-2.115.747-.622 1.571-1.055 2.457-1.258 2.128-.48 4.29-.48 6.418 0 .886.203 1.71.636 2.457 1.258.748.622 1.341 1.343 1.636 2.115.48 1.29.48 2.58 0 3.87zM12.002 5.567c-1.42 0-2.825.267-4.148.802-.674.265-1.254.598-1.76.996C5.586 7.73 5.17 8.16 4.887 8.653c-.31.54-.486 1.13-.526 1.748-.04.617-.008 1.25.093 1.884-.253-.162-.485-.348-.696-.554-.21-.205-.386-.43-.532-.676-.146-.245-.25-.503-.314-.766-.064-.263-.08-1.006-.08-1.006h-.002c-1.554-1.353-2.094-1.92-2.094-1.92-.127-.13-.263-.263-.408-.398-.242-.22-.497-.432-.767-.636-.27-.204-.543-.39-.817-.558-.274-.168-.54-.316-.798-.445-.257-.13-.509-.234-.755-.314-.247-.078-.487-.135-.72-.167l-.02-.005a3.064 3.064 0 0 0-1.03-.004c-.394.02-.78.077-1.157.172-.377.094-.74.22-.984.34-.243.12-.464.26-.66.417-.197.157-.367.327-.514.498-.146.171-.266.347-.36.526-.094.18-.16-.36-.16-.36l-.001-.001c-.13-.266-.28-.52-.45-.76-.17-.24-.356-.47-.558-.69-.2-.22-.41-.428-.627-.62-.218-.19-.434-.367-.648-.53-.213-.163-.42-.31-.62-.437-.2-.127-.39-.234-.567-.32-.178-.087-.34-.15-.49-.19l-.02-.007c-.4-.05-.79-.06-1.18-.03-.39.03-.77.108-1.13.238-.36.13-.69.293-.98.487-.29.194-.546.417-.768.667-.22.25-.402.52-.54.802-.138.283-.23.578-.277.88-.046.302-.04.606.012.906.053.3.14.6.26.885.12.285.27.56.45.816.18.256.39.49.63.702.235.212.493.398.767.558.274.159.56.288.857.387.297.098.604.168.913.208.31.04.614.04.912 0 .3-.04.59-.115.86-.226.27-.11.52-.25.75-.41.23-.16.43-.34.6-.53.17-.19.31-.4.42-.61s.19-.43.23-.65l.006-.03c.09-1.282.046-2.316-.134-3.076-.138-.588-.344-1.11-.618-1.564-.275-.453-.61-.83-.988-1.127-.38-.297-.8-.51-1.25-.638-1.4-.385-2.88-.34-4.275.12-.59.19-1.18.45-1.76.75-.58.3-.98.66-1.19.99-.21.33-.28.59-.21.78.07.19.26.28.56.28.3 0 .6-.07.9-.21.3-.14.58-.33.84-.57.26-.24.52-.49.77-.75.25-.26.49-.52.7-.77.21-.25.4-.49.57-.73.18-.24.32-.47.43-.68.11-.21.18-.4.2-.56.02-.16-.01-.3-.08-.43-.07-.13-.19-.22-.36-.28-.17-.06-.39-.08-.66-.08-1.11 0-2.28.27-3.41.81-.67.32-1.3.7-1.89 1.13-.58.43-1.13.9-1.63 1.4-1.5.75-2.9 1.63-4.22 2.65-.66.5-.94.75-.84.75h-.001c.01 0 .02-.002.03-.005.04-.01.07-.02.1-.03.04-.01.07-.02.1-.03.03-.01.06-.02.09-.02.03-.01.06-.01.09-.02.03-.01.06-.01.09-.01.02 0 .04-.002.06-.002.02 0 .04-.002.06-.002.007 0 .013-.001.02-.001.002 0 .004 0 .006 0 .002 0 .004 0 .006 0 .002 0 .004 0 .006 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 -.001 .002 -.001 .002 -.001 .001 -.001 .002 -.001 .001 -.001 .002 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001-.082.016-.395.045-.596.088-.857.147-1.002.327-.145.18-.08.3-.06.36.02.06.07.1.15.11.08.01.21-.01.38-.05.17-.04.37-.1.59-.19.22-.09.46-.2.72-.32.26-.12.55-.26.86-.4.31-.14.65-.29 1.02-.45 1.48-.65 3.06-1.12 4.71-1.34 2.22-.3 4.49-.03 6.64.8.44.16.86.35 1.25.59.39.23.76.51 1.1.84.34.33.64.67.9.99h.002c.08-.02.16-.04.24-.06.08-.02.16-.04.24-.05.08-.01.16-.02.24-.02.08 0 .16-.01.24-.01.08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002-.12-.01-.24-.01-.36-.01-.12 0-.24 0-.36 0-.12 0-.24-.001-.36-.001-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002c-1.144-.065-2.29-.005-3.414.185-.72.12-.22-.1-.22-.1z"/>
           <path d="M12.002 12s-1.898 3.53-2.617 4.908c-.71-1.378-2.617-4.908-2.617-4.908-.344-.658-.3-1.63.12-2.3.42-.67 1.15-1.07 1.95-1.12.8 0 1.54.45 1.95 1.12.42.67.46 1.64.12 2.3z"/>
           <ellipse cx="12.002" cy="7.417" rx="1.5" ry="1.5"/>
        </svg>
        Continue with Apple
      </button>
    </div>

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

    <form class="space-y-4">
      <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 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 transition-colors duration-300">
        </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 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 transition-colors duration-300">
        </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 rounded dark:border-gray-600 dark:bg-gray-700 dark:checked:bg-emerald-600 transition-colors duration-300">
          <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-300">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-emerald-700 hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">
          Sign In
        </button>
      </div>
    </form>

    <div class="text-center text-sm text-gray-600 dark:text-gray-400 transition-colors duration-300">
      Not a member? <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300 transition-colors duration-300">Sign up now</a>
    </div>
  </div>
</div>

소셜 로그인 구성 요소

머티리얼 디자인(Material Design) 원칙에서 영감을 받은 복잡한 소셜 로그인 구성 요소로, 풍부한 보석 톤, 반응형 레이아웃, 소셜 네트워킹 인터페이스에 대한 다크 모드 지원을 특징으로 합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 flex items-center justify-center p-4 dark:bg-gray-900 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:max-w-lg lg:max-w-xl transition-all duration-300 ease-in-out transform hover:scale-[1.01] border border-gray-200 dark:border-gray-700">
    <div class="md:flex">
      <div class="w-full p-8 md:w-2/3 lg:w-3/5 relative">
        <div class="flex items-center justify-between mb-8">
          <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white">Join Us!</h2>
          <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Sign Up</a>
        </div>

        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300 mb-8 max-w-[200px]">Connect with friends and the world around you on our social platform.</p>

        <div class="space-y-4 mb-8">
          <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path fill="currentColor" d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 62.1l-65.7 65.7c-31.5-29.2-76.3-46.7-100.6-46.7-65.1 0-118.8 52.8-118.8 118s52.7 118 118.8 118c50.7 0 86.8-24.3 103.5-46.7h-170.8V256h240.8z"></path></svg>
            Sign in with Google
          </button>
          <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.66S260.43 0 223.34 0C154.2 0 110.18 41.13 110.18 106.6V188H22.4v92h87.78V512h109.14V288z"></path></svg>
            Sign in with Facebook
          </button>
        </div>

        <div class="relative flex justify-center text-xs uppercase mb-8">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
          <div class="absolute inset-y-0 left-0 right-0 border-t border-gray-300 dark:border-gray-600 flex items-center -z-10"></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-blue-500 focus:border-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            </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-blue-500 focus:border-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            </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-sapphire border-gray-300 dark:border-gray-600 rounded focus:ring-sapphire dark:focus:ring-sapphire form-checkbox dark:bg-gray-700 dark:checked:bg-sapphire">
              <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-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
            </div>
          </div>

          <div>
            <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-base font-semibold text-white bg-emerald hover:bg-emerald-dark focus:outline-none focus:ring- sapphire focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200 ease-in-out transform hover:-translate-y-0.5">
              Sign in
            </button>
          </div>
        </form>
      </div>
      <div class="hidden md:block md:w-1/3 lg:w-2/5 relative overflow-hidden rounded-r-xl bg-gradient-to-br from-emerald to-sapphire p-8 flex items-end justify-center dark:from-emerald-dark dark:to-sapphire-dark">
        <div class="absolute inset-0 bg-cover bg-center opacity-30 dark:opacity-20" style="background-image: url('https://picsum.photos/800/600?random=1');"></div>
        <div class="relative z-10 text-white text-center pb-12">
          <h3 class="text-2xl font-bold mb-4 drop-shadow-lg">Connect & Share</h3>
          <p class="text-sm mb-6 opacity-90 drop-shadow-md">Dive into a world of endless connections and vibrant communities. Your journey starts here.</p>
          <div class="relative w-28 h-28 mx-auto mb-4 border-4 border-white dark:border-gray-dark rounded-full overflow-hidden shadow-lg transform hover:scale-105 transition-transform duration-300">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <span class="absolute bottom-1 right-1 block w-4 h-4 bg-lime-400 border-2 border-white dark:border-gray-dark rounded-full"></span>
          </div>
          <p class="font-semibold">Join Mark Today!</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom colors for Jewel Tones */
  .bg-emerald {
    background-color: #00A36C;
  }
  .hover\:bg-emerald-dark:hover {
    background-color: #008C5C;
  }
  .from-emerald {
    --tw-gradient-from: #00A36C var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 163 108 / 0) var(--tw-gradient-to-position);
  }
  dark .dark\:from-emerald-dark {
    --tw-gradient-from: #008C5C var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 140 92 / 0) var(--tw-gradient-to-position);
  }

  .to-sapphire {
    --tw-gradient-to: #0F52BA var(--tw-gradient-to-position);
  }
  dark .dark\:to-sapphire-dark {
    --tw-gradient-to: #0A3C9E var(--tw-gradient-to-position);
  }

  .text-sapphire {
    color: #0F52BA;
  }
  .focus\:ring-sapphire:focus {
    --tw-ring-color: #0F52BA;
  }
  dark .checked\:bg-sapphire:checked {
    background-color: #0F52BA;
  }
</style>

소셜 로그인 구성 요소

머티리얼 디자인(Material Design) 원칙에서 영감을 받은 반응형 소셜 로그인 구성 요소로, 고대비 색상과 다크 모드 지원을 특징으로 하며 엔터테인먼트 및 미디어 플랫폼에 적합합니다.

열다 미리 보기

                <div class="p-4 md:p-8 lg:p-12 min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl relative border-t-4 border-b-4 border-indigo-600 dark:border-purple-600">
    <div class="px-6 py-8 md:px-8 md:py-10">
      <div class="flex items-center justify-center mb-6">
        <svg class="h-12 w-12 text-indigo-600 dark:text-purple-600" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.87-7-7.93h2c0 3.31 2.69 6 6 6v2.07zm6-1.12V14h-2v3.13c1.78-.96 3-2.99 3-5.13h2c0 2.56-1.53 4.79-3.72 5.75zM12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8zm0 2c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 2c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"/>
        </svg>
      </div>
      <h2 class="text-3xl font-extrabold text-center text-gray-900 dark:text-white mb-2">Welcome Back!</h2>
      <p class="text-center text-gray-600 dark:text-gray-300 mb-8">Log in to continue your entertainment journey.</p>

      <div class="space-y-4 mb-6">
        <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-purple-500">
          <svg class="w-6 h-6 mr-3" viewBox="0 0 48 48">
            <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.65 0 6.84 5.09 3.29 12.01l7.53 5.85C12.44 14.16 17.65 9.5 24 9.5z"/>
            <path fill="#4285F4" d="M46.98 24C46.98 22.9 46.81 21.84 46.52 20.76h-2.92v-3.7H39.8M24 48c6.47 0 11.9-2.38 16.19-6.36l-6.85-6.85c-2.5 2.38-5.67 3.6-9.21 3.6-6.35 0-11.56-4.66-13.47-10.84l-7.53 5.85C6.84 42.91 14.65 48 24 48z"/>
            <path fill="#FBBC04" d="M6.86 24c0-1.78.29-3.57.85-5.26l-7.53-5.85C2.69 16.64 2 20.2 2 24s.69 7.36 1.7 10.11l7.53-5.85c-.56-1.69-.85-3.48-.85-5.26z"/>
            <path fill="#34A853" d="M24 45.5c3.54 0 6.71-1.22 9.21-3.6l6.85 6.85c-4.29 3.98-9.72 6.36-16.19 6.36-9.35 0-17.16-5.09-20.71-12.01l7.53-5.85c1.91 6.18 7.12 10.84 13.47 10.84z"/>
            <path fill="none" d="M0 0h48v48H0z"/>
          </svg>
          Sign in with Google
        </button>
        <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-purple-500">
          <svg class="w-6 h-6 mr-3 text-[#1877F2] dark:text-[#3B5998]" fill="currentColor" viewBox="0 0 24 24">
            <path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24h11.498v-8.77l-1.902-1.928.01-2.923 1.901-.001-.001-1.428q0-1.428.847-2.285 1.096-1.127 2.766-1.127 1.848 0 3.037.164.095.009.197.027.098.017.182.029v2.247Q17.8 8 16.657 8.01q-1.215 0-1.4.67-.183.67-.183 1.901V12h3.045l-.49 2.923-2.555.001v8.77h6.082c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"/>
          </svg>
          Sign in with Facebook
        </button>
        <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-purple-500">
          <svg class="w-6 h-6 mr-3 text-[#1DA1F2] dark:text-[#1DA1F2]" fill="currentColor" viewBox="0 0 24 24">
            <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.49-1.75.85-2.72 1.05C18.36 4.37 17.21 4 16 4c-4.07 0-7.36 3.29-7.36 7.36 0 .58.06 1.14.16 1.68C6.1 12.04 3.24 10.5 1.32 7.9c-.64 1.1-1 2.37-1 3.72 0 2.55 1.3 4.81 3.25 6.13-1.21-.04-2.35-.37-3.35-.92V17c0 3.56 2.52 6.53 5.83 7.22-.6.16-1.22.25-1.87.25-.46 0-.91-.04-1.34-.13.93 2.9 3.62 5.02 6.83 5.08-2.47 1.95-5.59 3.11-9 3.11-1.85 0-3.63-.11-5.36-.32 3.18 2.04 6.94 3.23 10.97 3.23 13.06 0 20.2-10.85 20.2-20.2v-.46c.87-.63 1.62-1.42 2.22-2.31z"/>
          </svg>
          Sign in with Twitter
        </button>
      </div>

      <div class="relative flex justify-center text-sm mb-6">
        <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 z-10">Or continue with</span>
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
        </div>
      </div>

      <form class="space-y-4">
        <div>
          <label for="email" class="sr-only">Email address</label>
          <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-indigo-500 dark:focus:ring-purple-500 focus:border-indigo-500 dark:focus:border-purple-500 focus:z-10 text-base bg-gray-50 dark:bg-gray-700 transition duration-150 ease-in-out" placeholder="Email address">
        </div>
        <div>
          <label for="password" class="sr-only">Password</label>
          <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-indigo-500 dark:focus:ring-purple-500 focus:border-indigo-500 dark:focus:border-purple-500 focus:z-10 text-base bg-gray-50 dark:bg-gray-700 transition duration-150 ease-in-out" placeholder="Password">
        </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-indigo-600 dark:text-purple-600 focus:ring-indigo-500 dark:focus:ring-purple-500 border-gray-300 dark:border-gray-600 rounded">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200"> Remember me </label>
          </div>
          <div class="text-sm">
            <a href="#" class="font-medium text-indigo-600 dark:text-purple-600 hover:text-indigo-500 dark:hover:text-purple-500 transition duration-150 ease-in-out"> Forgot your password? </a>
          </div>
        </div>
        <div>
          <button type="submit" class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-lg font-bold rounded-md text-white bg-indigo-600 dark:bg-purple-600 hover:bg-indigo-700 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-purple-500 transition duration-150 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
            Sign in
          </button>
        </div>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          Don't have an account?
          <a href="#" class="font-medium text-indigo-600 dark:text-purple-600 hover:text-indigo-500 dark:hover:text-purple-500 transition duration-150 ease-in-out"> Sign up </a>
        </p>
      </div>
    </div>
  </div>
</div>

Art Deco Social 로그인 구성 요소

아르데코에서 영감을 받은 복잡한 소셜 로그인 구성 요소로, 대시보드용으로 설계되었으며, 다크 모드 지원으로 완벽하게 반응합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-pink-200 to-purple-300 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-3xl shadow-xl max-w-md w-full relative overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl border-4 border-pink-400 dark:border-purple-600 animate-fade-in-up">
    <!-- Art Deco Background Elements -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-pink-300 dark:bg-purple-700 rounded-br-full opacity-60 transform -translate-x-1/2 -translate-y-1/2 rotate-45"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-purple-200 dark:bg-pink-800 rounded-tl-full opacity-60 transform translate-x-1/2 translate-y-1/2 -rotate-15"></div>

    <div class="relative z-10 text-center">
      <h2 class="text-4xl lg:text-5xl font-extrabold text-purple-700 dark:text-pink-400 mb-6 tracking-wide drop-shadow-md leading-tight">
        Welcome Back
      </h2>
      <p class="text-gray-600 dark:text-gray-300 mb-8 text-lg font-medium">
        Log in to your dashboard with elegance.
      </p>

      <div class="space-y-4 mb-8">
        <button class="w-full flex items-center justify-center py-3 px-6 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 shadow-md transform transition-all duration-300 hover:scale-[1.02] hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700 group">
          <svg class="w-6 h-6 mr-3 text-[#DB4437] group-hover:rotate-6 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24">
            <path d="M22.675 11.701c0-1.745-.15-3.376-.46-4.945H12v3.717h5.92c-.258 1.341-1.045 2.502-2.31 3.284v2.85h3.69c2.164-2.002 3.445-4.915 3.445-8.006z" clip-rule="evenodd" fill-rule="evenodd"/><path d="M12 23c3.08 0 5.688-1.012 7.585-2.738l-3.69-2.85c-.991.68-2.253 1.082-3.895 1.082-2.99 0-5.526-2.025-6.435-4.737H1.91v2.96c1.787 3.535 5.51 6.002 10.09 6.002z" clip-rule="evenodd" fill-rule="evenodd"/><path d="M5.565 14.887c-.23-.68-.363-1.41-.363-2.187 0-.777.133-1.507.363-2.187V7.55H1.91c-.815 1.625-1.28 3.45-1.28 5.485s.465 3.86 1.28 5.485L5.565 14.887z" clip-rule="evenodd" fill-rule="evenodd"/><path d="M12 5.093c1.674 0 3.178.68 4.256 1.676l3.27-3.27C17.688 1.413 14.908 0 12 0 7.49 0 3.767 2.467 1.91 6L5.565 8.966c.909-2.712 3.445-4.737 6.435-4.737z" clip-rule="evenodd" fill-rule="evenodd"/>
          </svg>
          <span class="font-semibold text-lg">Log in with Google</span>
        </button>

        <button class="w-full flex items-center justify-center py-3 px-6 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 shadow-md transform transition-all duration-300 hover:scale-[1.02] hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-slate-300 dark:focus:ring-slate-700 group">
          <svg class="w-6 h-6 mr-3 text-[#1877F2] group-hover:rotate-6 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24">
            <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.248-1.333 1.024-1.333h2.976v-5h-4.305c-4.98 0-5.695 3.223-5.695 7.692v1.308z"/>
          </svg>
          <span class="font-semibold text-lg">Log in with Facebook</span>
        </button>

        <button class="w-full flex items-center justify-center py-3 px-6 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 shadow-md transform transition-all duration-300 hover:scale-[1.02] hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-white group">
          <svg class="w-6 h-6 mr-3 text-gray-800 dark:text-gray-200 group-hover:rotate-6 transition-transform duration-200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM8 12a4 4 0 118 0"/></svg>
          <span class="font-semibold text-lg">Log in with Apple</span>
        </button>
      </div>

      <div class="relative flex items-center justify-center mb-8">
        <div class="absolute w-full border-t border-gray-300 dark:border-gray-600"></div>
        <span class="relative z-10 px-4 bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-sm font-medium">OR</span>
      </div>

      <form class="space-y-5 mb-8">
        <div>
          <label for="email" class="sr-only">Email Address</label>
          <input type="email" id="email" placeholder="Email Address" class="w-full py-3 px-5 border border-gray-300 dark:border-gray-600 rounded-xl bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-teal-600 transition duration-200 shadow-sm">
        </div>
        <div>
          <label for="password" class="sr-only">Password</label>
          <input type="password" id="password" placeholder="Password" class="w-full py-3 px-5 border border-gray-300 dark:border-gray-600 rounded-xl bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-teal-600 transition duration-200 shadow-sm">
        </div>
        <button type="submit" class="w-full py-3 px-6 bg-gradient-to-r from-pink-500 to-purple-600 dark:from-purple-700 dark:to-pink-600 text-white rounded-xl font-bold text-lg shadow-lg hover:shadow-xl transform transition-all duration-300 hover:scale-[1.02] focus:outline-none focus:ring-4 focus:ring-purple-400 dark:focus:ring-pink-500 animate-pulse-on-hover">
          Sign In
        </button>
      </form>

      <div class="text-sm text-gray-600 dark:text-gray-400">
        Don't have an account? 
        <a href="#" class="text-purple-600 dark:text-pink-400 font-semibold hover:underline transition-colors duration-200">
          Sign up now
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  /* Keyframes for animation */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
  }

  /* Custom pulse on hover for the button */
  .animate-pulse-on-hover:hover {
    animation: pulse 1s infinite cubic-bezier(0.4, 0, 0.6, 1);
  }
</style>

Luxury Social Login Component for Weather 앱

날씨/기후 애플리케이션을 위해 설계된 우아하고 세련된 소셜 로그인 구성 요소로, 고대비 색상, 세련된 타이포그래피 및 다크 모드 지원을 특징으로 합니다. 다양한 로그인 옵션과 현대적이고 고급스러운 느낌을 제공합니다.

열다 미리 보기

                <div class="min-h-screen bg-gradient-to-br from-indigo-950 to-gray-900 flex items-center justify-center p-4 sm:p-6 dark:from-zinc-950 dark:to-black font-serif text-white">
  <div class="w-full max-w-md bg-white/5 rounded-3xl backdrop-filter backdrop-blur-lg shadow-2xl overflow-hidden animate-fade-in-up transition-all duration-500 ease-in-out dark:bg-black/20 dark:shadow-zinc-800/50 border border-white/10 dark:border-zinc-700">
    <div class="p-8 sm:p-10">
      <h2 class="text-4xl font-extrabold text-center mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-indigo-400 dark:from-teal-300 dark:to-indigo-300 transform transition-transform duration-300 hover:scale-105">
        Welcome to AeroCast
      </h2>
      <p class="text-center text-gray-300 mb-8 max-w-sm mx-auto text-lg leading-relaxed dark:text-gray-400">
        Sign in to unlock personalized weather insights and climate data from around the globe.
      </p>

      <div class="space-y-4 mb-8">
        <button class="w-full flex items-center justify-center space-x-3 px-6 py-3 border border-white/20 rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-400 bg-gradient-to-r from-gray-800 to-gray-900 text-white dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-900 dark:focus:ring-teal-300" aria-label="Login with Google">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12.001 4.8c-3.248 0-6.059 2.199-7.054 5.163l-2.617-.61c-.518-2.695.845-5.597 3.51-7.294L7.5 1.5l2.493 1.488C9.405 3.333 10.613 3 12.001 3c1.782 0 3.298.534 4.542 1.455L14.73 6.94C13.882 5.568 12.983 4.8 12.001 4.8z" fill="#EA4335"/><path d="M22.25 10.1C22.25 9.7 22.22 9.3 22.18 8.9L12.001 8.9L12.001 13.9L17.511 13.9C17.218 15.614 16.275 16.924 14.887 17.818L17.91 20.17C19.98 18.57 21.251 16.095 21.251 13c0-.9-.1-1.7-.2-2.5zm-3.048 7.6L16.275 16.14c-1.373.914-3.14 1.46-5.02 1.46-3.486 0-6.42-2.316-7.488-5.46L1.05 12.23C.4 14.28.001 16.58.001 19c0 4.148 2.215 7.747 5.752 9.177l2.87-2.146c-2.321-.864-4.04-3.08-4.04-5.698 0-1.89.704-3.6 1.86-4.9L6.1 9.5l3.87 2.92c-.89.9-1.39 2.05-1.39 3.28 0 2.65 2.15 4.8 4.8 4.8 1.45 0 2.76-.64 3.68-1.66z" fill="rgba(0,0,0,0)"/><path d="M6.862 13.56c-.66.86-1.07 2-1.07 3.28 0 2.65 2.15 4.8 4.8 4.8 1.45 0 2.76-.64 3.68-1.66L17.91 20.17c-1.87 1.4-4.22 2.2-6.2 2.2C4.78 22.37 0 17 0 10.1C0 7.6 1.1 5.3 2.9 3.5L6.86 6.5C5.8 8.1 5.2 9.9 5.2 11.9c0 1.9.4 3.7 1.5 5.2z" fill="#34A853"/><path d="M22.25 10.1C22.25 9.7 22.22 9.3 22.18 8.9L12.001 8.9L12.001 13.9L17.511 13.9C17.218 15.614 16.275 16.924 14.887 17.818L17.91 20.17C19.98 18.57 21.251 16.095 21.251 13c0-.9-.1-1.7-.2-2.5zm-3.048 7.6L16.275 16.14c-1.373.914-3.14 1.46-5.02 1.46-3.486 0-6.42-2.316-7.488-5.46L1.05 12.23C.4 14.28.001 16.58.001 19c0 4.148 2.215 7.747 5.752 9.177l2.87-2.146c-2.321-.864-4.04-3.08-4.04-5.698 0-1.89.704-3.6 1.86-4.9L6.1 9.5l3.87 2.92c-.89.9-1.39 2.05-1.39 3.28 0 2.65 2.15 4.8 4.8 4.8 1.45 0 2.76-.64 3.68-1.66z" fill="#4285F4"/><path d="M12.001 4.8c-3.248 0-6.059 2.199-7.054 5.163l-2.617-.61c-.518-2.695.845-5.597 3.51-7.294L7.5 1.5l2.493 1.488C9.405 3.333 10.613 3 12.001 3c1.782 0 3.298.534 4.542 1.455L14.73 6.94C13.882 5.568 12.983 4.8 12.001 4.8z" fill="#FBBC04" transform="matrix(0 1 -1 0 24 0)"/></svg>
          <span class="text-lg font-semibold">Sign in with Google</span>
        </button>
        <button class="w-full flex items-center justify-center space-x-3 px-6 py-3 border border-white/20 rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-400 bg-gradient-to-r from-gray-800 to-gray-900 text-white dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-900 dark:focus:ring-teal-300" aria-label="Login with Apple">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 0c-3.328 0-6.035 2.707-6.035 6.035v11.93c0 3.328 2.707 6.035 6.035 6.035s6.035-2.707 6.035-6.035V6.035C18.035 2.707 15.328 0 12 0zm0 1.5c2.518 0 4.535 2.017 4.535 4.535v.001l-.001.001v11.931c0 2.518-2.017 4.535-4.535 4.535s-4.535-2.017-4.535-4.535V6.034C7.465 3.518 9.482 1.5 12 1.5zM12 4.5c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5zM12 9c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5zM12 13.5c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5zM12 18c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5z" clip-rule="evenodd" fill="#FFFFFF" fill-rule="evenodd"/><path d="M12 4.5c0-.829-.671-1.5-1.5-1.5S9 3.671 9 4.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5zM12 9c0-.829-.671-1.5-1.5-1.5S9 8.171 9 9s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5zM12 13.5c0-.829-.671-1.5-1.5-1.5S9 12.671 9 13.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5zM12 18c0-.829-.671-1.5-1.5-1.5S9 17.171 9 18s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5z" opacity=".2" fill="#000000"/><path d="M12 1.5c-2.518 0-4.535 2.017-4.535 4.535v11.931c0 2.518 2.017 4.535 4.535 4.535s4.535-2.017 4.535-4.535V6.034C16.535 3.518 14.518 1.5 12 1.5z" stroke="currentColor" stroke-opacity=".1" stroke-width=".5"/></svg>

          <span class="text-lg font-semibold">Sign in with Apple</span>
        </button>
      </div>

      <div class="relative flex items-center justify-center mb-8">
        <div class="absolute inset-y-0 left-0 w-1/2 bg-gradient-to-r from-transparent to-white/10 dark:to-zinc-700/10 rounded-full blur-sm"></div>
        <div class="absolute inset-y-0 right-0 w-1/2 bg-gradient-to-l from-transparent to-white/10 dark:to-zinc-700/10 rounded-full blur-sm"></div>
        <span class="px-4 py-2 bg-gray-900 border border-white/10 text-gray-400 rounded-full text-sm uppercase tracking-wider shadow-inner dark:bg-zinc-900 dark:border-zinc-700">Or Continue With</span>
      </div>

      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Email Address</label>
          <input type="email" id="email" name="email" autocomplete="email" required class="w-full px-5 py-3 border border-white/10 bg-gray-900 text-white rounded-xl shadow-inner placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent dark:bg-zinc-900 dark:border-zinc-700 dark:text-gray-200" placeholder="[email protected]">
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required class="w-full px-5 py-3 border border-white/10 bg-gray-900 text-white rounded-xl shadow-inner placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent dark:bg-zinc-900 dark:border-zinc-700 dark:text-gray-200" 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-teal-500 border-gray-600 rounded focus:ring-teal-400 dark:border-zinc-700 dark:bg-zinc-800 dark:checked:bg-teal-500">
            <label for="remember-me" class="ml-2 block text-gray-300 dark:text-gray-400">Remember me</label>
          </div>
          <a href="#" class="font-medium text-teal-400 hover:text-teal-300 transition-colors duration-200 dark:text-teal-300 dark:hover:text-teal-200">
            Forgot your password?
          </a>
        </div>
        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-6 border border-transparent rounded-xl shadow-sm text-lg font-bold text-gray-900 bg-gradient-to-r from-teal-400 to-indigo-400 hover:from-teal-300 hover:to-indigo-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-400 transition-all duration-300 ease-in-out transform hover:scale-[1.02] active:scale-95 dark:from-teal-300 dark:to-indigo-300 dark:text-zinc-900">
            Sign In
          </button>
        </div>
      </form>

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

브루탈리스트 소셜 로그인 (패션/뷰티)

패션 및 뷰티 브랜드를 위해 설계된 복잡하고 생생한 브루탈리즘 소셜 로그인 구성 요소로, 높은 대비, 대담한 요소, 다크 모드 지원을 통한 완전한 응답성을 특징으로 합니다.

열다 미리 보기

                <div class="min-h-screen bg-pink-300 dark:bg-zinc-900 flex items-center justify-center p-4 sm:p-8 font-mono">
  <div class="relative w-full max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl bg-orange-400 dark:bg-zinc-800 border-8 border-black dark:border-white shadow-[15px_15px_0_0_#000,20px_20px_0_0_#F00] dark:shadow-[15px_15px_0_0_#FFF,20px_20px_0_0_#FFF] transition-all duration-300 transform -rotate-1 skew-y-1 sm:skew-y-0">
    <div class="absolute -top-4 -left-4 w-12 h-12 bg-lime-400 dark:bg-purple-600 border-4 border-black dark:border-white"></div>
    <div class="absolute -bottom-4 -right-4 w-12 h-12 bg-cyan-400 dark:bg-yellow-500 border-4 border-black dark:border-white"></div>

    <div class="p-6 sm:p-8 lg:p-10 text-black dark:text-white relative z-10">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4 sm:mb-6 text-black dark:text-white uppercase tracking-widest leading-tight border-b-4 border-black dark:border-white pb-2">
        JOIN THE REVOLUTION
      </h2>
      <p class="text-sm sm:text-base mb-6 sm:mb-8 text-black dark:text-gray-300">
        Unlock exclusive looks and limited-edition drops. Step into a bolder reality.
      </p>

      <div class="grid grid-cols-1 gap-4">
        <button class="w-full flex items-center justify-center space-x-3 px-6 py-3 sm:py-4 bg-purple-600 dark:bg-indigo-600 text-white dark:text-white text-lg sm:text-xl font-bold uppercase border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#FFF] hover:shadow-[4px_4px_0_0_#000] dark:hover:shadow-[4px_4px_0_0_#FFF] transition-all duration-200 transform -skew-x-3 hover:translate-x-1 hover:translate-y-1">
          <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.473 18.99v-6.27h2.1l.31-2.45h-2.41v-1.57c0-.7.19-1.18.96-1.18h1.26V7.4c-.22-.03-.97-.09-1.85-.09-1.84 0-3.1 1.13-3.1 3.2V12h-2.1v2.45h2.1v6.54h3.7z" />
          </svg>
          <span>LOG IN WITH FACEBOOK</span>
        </button>

        <button class="w-full flex items-center justify-center space-x-3 px-6 py-3 sm:py-4 bg-red-600 dark:bg-rose-700 text-white dark:text-white text-lg sm:text-xl font-bold uppercase border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#FFF] hover:shadow-[4px_4px_0_0_#000] dark:hover:shadow-[4px_4px_0_0_#FFF] transition-all duration-200 transform skew-x-3 hover:-translate-x-1 hover:translate-y-1">
          <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.82 12.3c0 .24-.02.48-.05.7-.35 2.14-1.97 3.65-4.54 3.65-2.98 0-5.4-2.42-5.4-5.4s2.42-5.4 5.4-5.4c1.62 0 2.94.7 3.86 1.62l-1.1 1.08c-.5-.39-1.2-.84-2.76-.84-1.92 0-3.32 1.62-3.32 3.74 0 2.12 1.4 3.74 3.32 3.74 1.28 0 2.05-.54 2.5-1.02a3.86 3.86 0 0 0 .5-.7c.08-.18.15-.36.2-.56h-2.75V12.3h4.94zm0 0" />
          </svg>
          <span>SIGN UP WITH GOOGLE</span>
        </button>

        <button class="w-full flex items-center justify-center space-x-3 px-6 py-3 sm:py-4 bg-blue-600 dark:bg-sky-700 text-white dark:text-white text-lg sm:text-xl font-bold uppercase border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#FFF] hover:shadow-[4px_4px_0_0_#000] dark:hover:shadow-[4px_4px_0_0_#FFF] transition-all duration-200 transform rotate-1 hover:-rotate-1">
          <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 .29c-6.63 0-12 5.37-12 12 0 5.3 3.43 9.8 8.2 11.3-.6-.1-1.3-.2-1.9-.2-2.1 0-3.9 1.1-4.7 2.7-.4.9-.7 2.1-.7 3.4 0 1.2.3 2.3.7 3.3.4.9 1.1 1.7 1.9 2.3 1.1.8 2.5 1.2 4.1 1.2s3-.4 4.1-1.2c.8-.6 1.5-1.4 1.9-2.3.4-1 .7-2.1.7-3.3 0-1.3-.3-2.5-.7-3.4-.8-1.6-2.6-2.7-4.7-2.7-.6 0-1.3.1-1.9.2 4.7-1.5 8.2-6 8.2-11.3 0-6.63-5.37-12-12-12zM9.54 19.34c-.2-.04-.4-.07-.6-.1-.5-.1-1.1-.1-1.7-.1-.9 0-1.8.2-2.7.5-.9.3-1.8.7-2.6 1.3-.4-.6-.7-1.3-.7-2.1 0-.9.2-1.8.7-2.6.4-.8 1.1-1.4 1.9-1.9.8-.5 1.6-.7 2.5-.7h.9c.7 0 1.3.1 1.9.3.6.2 1.1.4 1.6.7-.4.6-.7 1.3-.7 2.1 0 .9.2 1.8.7 2.6.4.8 1.1 1.4 1.9 1.9.8.5 1.6.7 2.5.7h.9c.7 0 1.3.1 1.9.3.6.2 1.1.4 1.6.7-.4.6-.7 1.3-.7 2.1 0 .9.2 1.8.7 2.6.4.8 1.1 1.4 1.9 1.9.8.5 1.6.7 2.5.7h.9c.7 0 1.3.1 1.9.3.6.2 1.1.4 1.6.7z" />
          </svg>
          <span>CONTINUE WITH X</span>
        </button>
      </div>

      <div class="my-8 sm:my-10 flex items-center">
        <div class="flex-grow border-t-4 border-black dark:border-white"></div>
        <span class="flex-shrink mx-4 text-lg sm:text-xl font-bold uppercase text-black dark:text-white bg-orange-400 dark:bg-zinc-800 px-4 py-2 border-4 border-black dark:border-white transform rotate-3">OR</span>
        <div class="flex-grow border-t-4 border-black dark:border-white"></div>
      </div>

      <form class="grid grid-cols-1 gap-5">
        <div>
          <label for="email" class="block text-sm sm:text-base font-bold uppercase mb-2 text-black dark:text-white">Email Address</label>
          <input type="email" id="email" placeholder="[email protected]" class="w-full px-5 py-3 sm:py-4 bg-yellow-200 dark:bg-zinc-700 text-black dark:text-white placeholder-black dark:placeholder-gray-400 border-4 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-lime-500 dark:focus:ring-purple-500 transform skew-y-2 hover:skew-y-0 transition-all duration-200" aria-label="Email Address">
        </div>
        <div>
          <label for="password" class="block text-sm sm:text-base font-bold uppercase mb-2 text-black dark:text-white">Password</label>
          <input type="password" id="password" placeholder="********" class="w-full px-5 py-3 sm:py-4 bg-yellow-200 dark:bg-zinc-700 text-black dark:text-white placeholder-black dark:placeholder-gray-400 border-4 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-lime-500 dark:focus:ring-purple-500 transform -skew-y-2 hover:skew-y-0 transition-all duration-200" aria-label="Password">
        </div>

        <button type="submit" class="w-full px-6 py-4 sm:py-5 bg-lime-500 dark:bg-purple-500 text-black dark:text-white text-xl sm:text-2xl font-extrabold uppercase mt-4 sm:mt-6 border-4 border-black dark:border-white shadow-[10px_10px_0_0_#000] dark:shadow-[10px_10px_0_0_#FFF] hover:shadow-[5px_5px_0_0_#000] dark:hover:shadow-[5px_5px_0_0_#FFF] transition-all duration-200 transform rotate-2 hover:-rotate-2">
          SECURE ACCESS
        </button>
      </form>

      <div class="text-center mt-8 sm:mt-10 text-sm sm:text-base text-black dark:text-gray-300">
        <p class="mb-2 sm:mb-3">
          Don't have an account? <a href="#" class="font-bold underline text-blue-700 dark:text-cyan-500 hover:text-blue-900 dark:hover:text-cyan-400 transform hover:scale-105 inline-block">REGISTER NOW</a>
        </p>
        <p>
          <a href="#" class="font-bold underline text-blue-700 dark:text-cyan-500 hover:text-blue-900 dark:hover:text-cyan-400 transform hover:scale-105 inline-block">FORGOT MY PASSWORD</a>
        </p>
      </div>

      <div class="mt-10 text-center text-xs text-black dark:text-gray-400 opacity-80">
        <p>&copy; 2024 FASHION/BEAUTY. ALL RIGHTS SERVED (NO, REALLY).</p>
      </div>
    </div>
  </div>
</div>

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

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

열다 미리 보기

                <div class="flex min-h-screen items-center justify-center bg-lime-100 p-4 font-mono dark:bg-gray-900">
  <div class="w-full max-w-sm rounded-lg border-4 border-lime-700 bg-gradient-to-br from-lime-200 to-lime-50 perspective-1000 p-6 shadow-[8px_8px_0px_rgba(30,64,17,0.7)] transition-all duration-300 hover:shadow-[12px_12px_0px_rgba(30,64,17,0.8)] dark:border-emerald-600 dark:from-gray-800 dark:to-gray-700 dark:shadow-[8px_8px_0px_rgba(6,78,59,0.7)] dark:hover:shadow-[12px_12px_0px_rgba(6,78,59,0.8)]">
    <div class="mb-6 flex items-center justify-between">
      <h2 class="text-2xl font-bold uppercase text-lime-800 dark:text-emerald-400">Plug In!</h2>
      <span class="text-xl text-lime-600 dark:text-emerald-500">💾</span>
    </div>
    <div class="space-y-4">
      <button class="flex w-full items-center justify-center gap-3 rounded-md border-2 border-lime-600 bg-lime-400 py-3 text-lg font-semibold uppercase tracking-wide text-lime-900 shadow-[4px_4px_0px_rgba(63,98,18,0.7)] transition-all ease-in-out hover:-translate-y-1 hover:shadow-[6px_6px_0px_rgba(63,98,18,0.8)] focus:outline-none focus:ring-4 focus:ring-lime-700 dark:border-emerald-500 dark:bg-emerald-700 dark:text-emerald-50 dark:shadow-[4px_4px_0px_rgba(6,78,59,0.7)] dark:hover:-translate-y-1 dark:hover:shadow-[6px_6px_0px_rgba(6,78,59,0.8)] dark:focus:ring-emerald-400">
        <img src="https://www.svgrepo.com/show/512317/chrome.svg" alt="Google logo" class="h-6 w-6 filter invert dark:filter-none" />
        Login with Google
      </button>
      <button class="flex w-full items-center justify-center gap-3 rounded-md border-2 border-lime-600 bg-lime-400 py-3 text-lg font-semibold uppercase tracking-wide text-lime-900 shadow-[4px_4px_0px_rgba(63,98,18,0.7)] transition-all ease-in-out hover:-translate-y-1 hover:shadow-[6px_6px_0px_rgba(63,98,18,0.8)] focus:outline-none focus:ring-4 focus:ring-lime-700 dark:border-emerald-500 dark:bg-emerald-700 dark:text-emerald-50 dark:shadow-[4px_4px_0px_rgba(6,78,59,0.7)] dark:hover:-translate-y-1 dark:hover:shadow-[6px_6px_0px_rgba(6,78,59,0.8)] dark:focus:ring-emerald-400">
        <img src="https://www.svgrepo.com/show/448206/apple.svg" alt="Apple logo" class="h-6 w-6 filter invert dark:filter-none" />
        Login with Apple
      </button>
      <button class="flex w-full items-center justify-center gap-3 rounded-md border-2 border-lime-600 bg-lime-400 py-3 text-lg font-semibold uppercase tracking-wide text-lime-900 shadow-[4px_4px_0px_rgba(63,98,18,0.7)] transition-all ease-in-out hover:-translate-y-1 hover:shadow-[6px_6px_0px_rgba(63,98,18,0.8)] focus:outline-none focus:ring-4 focus:ring-lime-700 dark:border-emerald-500 dark:bg-emerald-700 dark:text-emerald-50 dark:shadow-[4px_4px_0px_rgba(6,78,59,0.7)] dark:hover:-translate-y-1 dark:hover:shadow-[6px_6px_0px_rgba(6,78,59,0.8)] dark:focus:ring-emerald-400">
        <img src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a69f118df70add2fce7_580b57fcd9996e24bc43c513.png" alt="Facebook logo" class="h-6 w-6 dark:filter invert" />
        Login with Facebook
      </button>
    </div>
    <div class="mt-6 text-center text-sm text-lime-700 dark:text-emerald-300">
      <p>Don't have an account? <a href="#" class="font-bold underline hover:text-lime-900 dark:hover:text-emerald-500">Register Now!</a></p>
    </div>
  </div>
</div>

소셜 로그인 구성 요소

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

열다 미리 보기

                <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-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8">
      <h2 class="text-3xl font-extrabold text-center mb-4 bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500 text-transparent bg-clip-text dark:from-red-300 dark:via-orange-300 dark:to-yellow-300">
        Welcome to Our Event!
      </h2>
      <p class="text-center text-gray-600 dark:text-gray-300 mb-8">
        Sign in or register to access the event schedule and networking features.
      </p>

      <div class="space-y-4">
        <button class="w-full flex items-center justify-center px-4 py-3 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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
          <svg class="w-5 h-5 mr-3"aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18.25h-2.5v-6h-1.5v-2h1.5V8.75c0-1.77 1.09-2.75 2.66-2.75 0.77 0 1.55 0.14 1.55 0.14v2.75h-1.38c-0.84 0-1.02 0.52-1.02 1.04v1.5h2.75l-0.44 2.75z"/>
          </svg>
          Continue with Facebook
        </button>

        <button class="w-full flex items-center justify-center px-4 py-3 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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
          <svg class="w-5 h-5 mr-3" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
            <path d="M22.675 11.22c0-1.127-0.116-2.193-0.335-3.218h-11.23v6.008h6.216c-0.272 1.393-1.066 2.585-2.228 3.376l-0.016 0.106 4.908 3.805 0.354 0.027c-3.003 2.348-6.791 3.765-10.916 3.765C5.9 24 0 18.09 0 12S5.9 0 12 0c3.272 0 6.22 1.194 8.52 3.149L17.135 6.43C15.7 5.176 13.9 4.545 12 4.545c-4.42 0-8 3.58-8 8s3.58 8 8 8c2.203 0 4.195-0.902 5.6-2.316l0.295-0.306zM12 6.008c2.206 0 4 1.794 4 4h-8c0-2.206 1.794-4 4-4z"/>
          </svg>
          Continue with Google
        </button>

        <button class="w-full flex items-center justify-center px-4 py-3 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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
          <svg class="w-5 h-5 mr-3"aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
            <path d="M2.083 23c-1.144 0-2.083-0.939-2.083-2.083v-18.834c0-1.144 0.939-2.083 2.083-2.083h18.834c1.144 0 2.083 0.939 2.083 2.083v18.834c0 1.144-0.939 2.083-2.083 2.083h-18.834zM17.433 7.375c0.88-0.9 1.144-2.124 0.655-3.328-0.489-1.204-1.633-1.956-2.909-1.895h-10.428v17.75h1.758v-8.988c0-0.457 0.057-0.914 0.171-1.341 0.32-1.047 1.096-1.841 2.171-2.209s2.21-0.278 3.197 0.18c0.988 0.457 1.633 1.341 1.884 2.455 0.252 1.114 0.086 2.298-0.489 3.292L17.433 7.375z"/>
          </svg>
          Continue with Apple
        </button>
      </div>

      <div class="relative my-8">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-700"></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 email
          </span>
        </div>
      </div>

      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email address</label>
          <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 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
          <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 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
        </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-gradient-to-r from-red-500 via-orange-500 to-yellow-500 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:ring-blue-500">
            <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-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit"
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white
            bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500 hover:from-red-600 hover:via-orange-600 hover:to-yellow-600
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
            Sign In
          </button>
        </div>
      </form>

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

소셜 로그인 구성 요소

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

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 duration-300 p-4 font-mono antialiased">
  <div class="w-full max-w-md mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-xl dark:shadow-stone-700/50 overflow-hidden border border-stone-200 dark:border-stone-700 transition-colors duration-300">
    <div class="p-6 sm:p-8 space-y-6">
      <h2 class="text-2xl sm:text-3xl font-bold text-center text-stone-800 dark:text-stone-100 uppercase tracking-wide">Log In Securely</h2>
      <p class="text-center text-stone-600 dark:text-stone-300 text-sm sm:text-base">
        Connect using your trusted government-approved accounts.
      </p>

      <div class="space-y-4">
        <button class="w-full flex items-center justify-center px-4 py-3 sm:py-3.5 border border-stone-300 dark:border-stone-600 rounded-md text-base sm:text-lg font-medium text-stone-700 dark:text-stone-200 bg-stone-50 hover:bg-stone-100 dark:bg-stone-700 dark:hover:bg-stone-600 transition-colors duration-200 shadow-sm">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 4.1a7.9 7.9 0 017.9 7.9c0 4.38-3.538 7.9-7.9 7.9s-7.9-3.52-7.9-7.9c0-4.38 3.538-7.9 7.9-7.9v0zM10.8 12h2.4v-2.4h-2.4V12zm-2.4 0h-2.4v-2.4h2.4V12zm4.8 0h2.4v-2.4h-2.4V12zm-4.8-4.8h2.4v-2.4h-2.4v2.4zm-2.4 0h-2.4v-2.4h2.4v2.4zm4.8 0h2.4v-2.4h-2.4v2.4zm0-4.8h2.4v-2.4h-2.4v2.4z"></path>
          </svg>
          <span>Continue with GovConnect ID</span>
        </button>

        <button class="w-full flex items-center justify-center px-4 py-3 sm:py-3.5 border border-stone-300 dark:border-stone-600 rounded-md text-base sm:text-lg font-medium text-stone-700 dark:text-stone-200 bg-stone-50 hover:bg-stone-100 dark:bg-stone-700 dark:hover:bg-stone-600 transition-colors duration-200 shadow-sm">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3 text-blue-600" 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.128 8.438 9.873V14.89h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.776-3.89 1.094 0 2.24.195 2.24.195v2.454H15.83c-1.222 0-1.6.75-1.6 1.555V12h2.77l-.44 2.89h-2.33v6.983C18.343 21.128 22 16.991 22 12z"></path>
          </svg>
          <span>Sign in with CitizenNet</span>
        </button>
      </div>

      <div class="relative flex justify-center text-xs sm:text-sm text-stone-500 dark:text-stone-400">
        <span class="bg-white dark:bg-stone-800 px-2 z-10">Or continue with credentials</span>
        <div class="absolute inset-y-0 left-0 right-0 h-px bg-stone-200 dark:bg-stone-700 top-1/2 -translate-y-1/2"></div>
      </div>

      <form class="space-y-4">
        <div>
          <label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-200 tracking-tight mb-1">Email Address</label>
          <input type="email" id="email" name="email" autocomplete="email" required
            class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500 text-stone-900 dark:text-stone-100 bg-stone-50 dark:bg-stone-700 focus:outline-none focus:ring-amber-500 focus:border-amber-500 dark:focus:ring-amber-400 dark:focus:border-amber-400 sm:text-base transition-colors duration-200">
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-stone-700 dark:text-stone-200 tracking-tight mb-1">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required
            class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500 text-stone-900 dark:text-stone-100 bg-stone-50 dark:bg-stone-700 focus:outline-none focus:ring-amber-500 focus:border-amber-500 dark:focus:ring-amber-400 dark:focus:border-amber-400 sm:text-base transition-colors duration-200">
        </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-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-600 rounded bg-stone-50 dark:bg-stone-700 dark:checked:bg-amber-600">
            <label for="remember-me" class="ml-2 block text-stone-600 dark:text-stone-300">
              Remember me
            </label>
          </div>

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

        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 dark:focus:ring-amber-400 transition-colors duration-200">
          Log In
        </button>
      </form>

      <p class="mt-6 text-center text-sm text-stone-600 dark:text-stone-300">
        Need an account? <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300 transition-colors duration-200">Register Now</a>
      </p>
    </div>
  </div>
</div>