Social Login Component

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

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

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

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

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

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

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

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

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

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

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