Search Components

Social Login

Authentication using social media accounts

Social Login Component

A social login component with an industrial, raw-material aesthetic using cool neutral colors, suitable for booking and reservation systems. It features social login buttons and a separator with a manual login option, all responsive and with dark mode support.

Open Preview

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

Social Login Component

A simple, clean, and responsive social login component with a forest green color palette, designed for news/journalism websites, emphasizing typography and grid systems. Includes dark mode support.

Open Preview

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

Social Login Component

A complex social login component inspired by Material Design principles, featuring rich jewel tones, responsive layout, and dark mode support for social networking interfaces.

Open Preview

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

Social Login Component

A responsive social login component inspired by Material Design principles, featuring high-contrast colors and dark mode support, suitable for entertainment and media platforms.

Open Preview

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

A complex, Art Deco inspired social login component with candy/sweet color scheme, designed for dashboards, fully responsive with dark mode support.

Open Preview

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

An elegant and sophisticated social login component designed for a weather/climate application, featuring high-contrast colors, refined typography, and dark mode support. It offers multiple login options and a modern, premium feel.

Open Preview

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

Brutalist Social Login (Fashion/Beauty)

A complex, vibrant brutalist social login component designed for fashion and beauty brands, featuring high contrast, bold elements, and full responsiveness with dark mode support.

Open Preview

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

Retro Social Login Component

A simple, responsive social login component with a retro/vintage 80s/90s aesthetic using a forest/green color palette. Includes dark mode support.

Open Preview

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

Social Login Component

A clean, trustworthy social login component for event and conference websites, featuring a multi-color gradient theme and dark mode support. Designed for corporate/professional use.

Open Preview

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

Social Login Component

Clean, code-inspired social login component with a monospace font, warm neutral color scheme, suitable for government/public service websites. Includes responsive design and dark mode support.

Open Preview

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

Search Components

Categories

Social Login