Art Deco Social 로그인 구성 요소

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