소셜 로그인 구성 요소

<div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-md p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 transform skew-y-1 -skew-x-1 sm:skew-y-0 sm:skew-x-0 relative overflow-hidden">
    <!-- Decorative metal plate effect -->
    <div class="absolute inset-0 bg-gradient-to-br from-gray-200 via-gray-300 dark:from-gray-700 dark:via-gray-600 to-gray-400 dark:to-gray-500 opacity-20 dark:opacity-10 transform -skew-y-6 skew-x-3 scale-125 pointer-events-none"></div>
    <div class="absolute inset-0 bg-gray-50 dark:bg-gray-800 opacity-70"></div>
    <div class="absolute z-10 p-6 sm:p-8 w-full h-full inset-0 flex flex-col justify-center">

      <h2 class="text-3xl sm:text-4xl font-extrabold text-center text-gray-800 dark:text-gray-100 mb-6 uppercase tracking-wider leading-tight animate-fade-in-down">
        Secure Your Spot
      </h2>
      <p class="text-center text-gray-600 dark:text-gray-300 mb-8 max-w-sm mx-auto animate-fade-in-up">
        Login or create an account to book your next reservation.
      </p>

      <div class="space-y-4 mb-8">
        <button class="w-full flex items-center justify-center px-6 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-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95 animate-slide-in-left">
          <svg class="h-5 w-5 mr-3" 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 0zm2.447 18.064c-1.393-.243-2.613-.67-3.957-1.127a7.25 7.25 0 01-1.39-1.258c-.3-.263-.5-.487-.717-.743L12 9.043l-1.09.917c-.207.173-.41.343-.607.507-.22.18-.46.363-.733.543-.59.38-1.27.757-2.03.957-.497.123-.97.23-1.42.31l-.22.04v-2.73c.48-.073.96-.18 1.41-.31.75-.24 1.4-.57 1.9-.93.5-.36.9-.76 1.15-1.1s.4-1.04.4-1.3l.01-.01v-.01c0-.18.02-.37.05-.57l.01-.01c.04-.26.07-.48.07-.58v-.01h-.01c-.01-.01-.32-.23-.62-.48l-.01-.01c-.13-.1-.28-.2-.42-.3-.22-.16-.45-.3-.7-.41l-.01-.01c-.16-.08-.34-.14-.52-.19-.18-.05-.36-.08-.55-.08h-.01c-.15 0-.28 0-.41.01l-.01.01h-.01c-.12 0-.25.01-.38.01l-.01.01h-.01c-.26-.06-.52-.12-.78-.18l-.01-.01H3.6c-1.897 0-3.447 1.55-3.447 3.447v1.8c0 1.897 1.55 3.447 3.447 3.447h2.093c.27 0 .54-.01.81-.02l-.01-.01c.21-.02.42-.04.62-.07l-.01-.01c.21-.03.42-.06.63-.1l.01-.01c.19-.03.38-.07.57-.1l.01-.01c.19-.04.38-.08.57-.12l.01-.01c.18-.04.36-.08.54-.12l.01-.01c.18-.04.36-.09.54-.13l-.01-.01c.19-.04.38-.09.57-.14z" clip-rule="evenodd"/>
          </svg>
          Continue with Google
        </button>
        <button class="w-full flex items-center justify-center px-6 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-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95 animate-slide-in-right">
          <svg class="h-5 w-5 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M18.172 1.4C16.142 0.385 13.916 0 12 0S7.858.385 5.828 1.4C2.658 3.036 0 7.375 0 12c0 4.148 2.215 7.644 5.318 9.53a15.7 15.7 0 006.682 2.47c3.966 0 7.5-.762 9.074-2.128C21.782 19.123 24 15.688 24 12c0-4.625-2.658-8.964-5.828-10.6zM15.348 18.06c-1.393.243-2.613.67-3.957 1.127a7.25 7.25 0 01-1.39-1.258c-.3-.263-.5-.487-.717-.743L12 9.043l-1.09.917c-.207.173-.41.343-.607.507-.22.18-.46.363-.733.543-.59.38-1.27.757-2.03.957-.497.123-.97.23-1.42.31l-.22.04v-2.73c.48-.073.96-.18 1.41-.31.75-.24 1.4-.57 1.9-.93.5-.36.9-.76 1.15-1.1s.4-1.04.4-1.3l.01-.01v-.01c0-.18.02-.37.05-.57l.01-.01c.04-.26.07-.48.07-.58v-.01h-.01c-.01-.01-.32-.23-.62-.48l-.01-.01c-.13-.1-.28-.2-.42-.3-.22-.16-.45-.3-.7-.41l-.01-.01c-.16-.08-.34-.14-.52-.19-.18-.05-.36-.08-.55-.08h-.01c-.15 0-.28 0-.41.01l-.01.01h-.01c-.12 0-.25.01-.38.01l-.01.01h-.01c-.26-.06-.52-.12-.78-.18l-.01-.01H3.6c-1.897 0-3.447 1.55-3.447 3.447v1.8c0 1.897 1.55 3.447 3.447 3.447h2.093c.27 0 .54-.01.81-.02l-.01-.01c.21-.02.42-.04.62-.07l-.01-.01c.21-.03.42-.06.63-.1l.01-.01c.19-.03.38-.07.57-.1l.01-.01c.19-.04.38-.08.57-.12l.01-.01c.18-.04.36-.08.54-.12l.01-.01c.18-.04.36-.09.54-.13l-.01-.01c.19-.04.38-.09.57-.14z" clip-rule="evenodd" />
          </svg>
          Continue with Apple 
        </button>
      </div>

      <div class="relative mb-8">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></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 font-mono text-xs uppercase tracking-wider">
            OR
          </span>
        </div>
      </div>

      <form class="space-y-6">
        <div>
          <label for="email" class="sr-only">Email address</label>
          <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-4 py-3 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-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-base transition duration-300 ease-in-out transform focus:scale-[1.01] animate-fade-in-down-delay" 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 block w-full px-4 py-3 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-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-base transition duration-300 ease-in-out transform focus:scale-[1.01] animate-fade-in-down-delay-2" 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-indigo-400 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500 dark:focus:ring-indigo-400">
            <label for="remember-me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300 transition duration-200 ease-in-out">
              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-base font-medium text-white bg-indigo-600 dark:bg-indigo-700 hover:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 animate-fade-in-up-delay">
            Sign in
          </button>
        </div>
      </form>

      <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-300 animate-fade-in-up-delay-2">
        Not a member? 
        <a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300 transition duration-200 ease-in-out">
          Sign up now
        </a>
      </p>
    </div>
  </div>
</div>

<style>
/* Basic keyframe animations for simple entrance effects */
@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-down { animation: fade-in-down 0.6s ease-out forwards; }
.animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
.animate-slide-in-left { animation: slide-in-left 0.7s ease-out forwards; }
.animate-slide-in-right { animation: slide-in-right 0.7s ease-out forwards; }

/* Delays for staggered animations */
.animate-fade-in-down-delay { animation: fade-in-down 0.6s ease-out 0.3s forwards; opacity: 0; }
.animate-fade-in-down-delay-2 { animation: fade-in-down 0.6s ease-out 0.4s forwards; opacity: 0; }
.animate-fade-in-up-delay { animation: fade-in-up 0.6s ease-out 0.5s forwards; opacity: 0; }
.animate-fade-in-up-delay-2 { animation: fade-in-up 0.6s ease-out 0.6s forwards; opacity: 0; }
</style>