소셜 로그인 구성 요소

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