Social Login Component

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