소셜 로그인 구성 요소

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