Art Deco Social 로그인 구성 요소

<div class="min-h-screen bg-gradient-to-br from-stone-100 to-stone-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-serif dark:from-stone-900 dark:to-stone-950">
  <div class="w-full max-w-md bg-white p-8 rounded-xl shadow-2xl dark:bg-stone-800 transition-all duration-300 transform scale-100 opacity-100">
    <div class="relative mb-8 text-center">
      <h2 class="text-4xl font-bold text-stone-800 dark:text-stone-100 mb-2 tracking-wider">Login</h2>
      <p class="text-stone-600 dark:text-stone-300 mb-6">Access your CRM dashboard</p>

      <!-- Art Deco Pattern Top -->
      <div class="absolute -top-6 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-gradient-to-r from-yellow-700 to-yellow-900 rounded-b-lg shadow-md"></div>
      <div class="absolute -top-8 left-1/2 -translate-x-1/2 w-2/3 h-1 bg-stone-300 dark:bg-stone-600 rounded-b-lg"></div>

      <!-- Art Deco geometric lines -->
      <div class="absolute inset-x-0 bottom-0 text-stone-300 dark:text-stone-600 text-sm opacity-50">
        <svg class="mx-auto" width="100%" height="20" viewBox="0 0 100 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 10H100" stroke="currentColor" stroke-width="0.5"/>
          <path d="M10 5L90 5" stroke="currentColor" stroke-width="0.5"/>
          <path d="M20 0L80 0" stroke="currentColor" stroke-width="0.5"/>
        </svg>
      </div>
    </div>

    <div class="space-y-4 mb-6">
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-lg bg-stone-100 border border-stone-300 text-stone-700 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-200 shadow-sm hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors duration-300">
        <img src="https://www.svgrepo.com/show/512317/google-177.svg" alt="Google logo" class="h-5 w-5 mr-3 filter dark:invert">
        <span class="font-medium">Sign in with Google</span>
      </button>
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-lg bg-stone-100 border border-stone-300 text-stone-700 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-200 shadow-sm hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors duration-300">
        <img src="https://www.svgrepo.com/show/303126/facebook-1-logo.svg" alt="Facebook logo" class="h-5 w-5 mr-3 filter dark:invert">
        <span class="font-medium">Sign in with Facebook</span>
      </button>
    </div>

    <div class="relative flex py-5 items-center">
      <div class="flex-grow border-t border-stone-300 dark:border-stone-600"></div>
      <span class="flex-shrink mx-4 text-stone-500 dark:text-stone-400 font-sans text-sm">Or continue with</span>
      <div class="flex-grow border-t border-stone-300 dark:border-stone-600"></div>
    </div>

    <form class="space-y-5">
      <div>
        <label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-200 mb-1">Email Address</label>
        <input type="email" id="email" name="email" class="mt-1 block w-full px-4 py-3 rounded-lg border border-stone-300 focus:ring-yellow-800 focus:border-yellow-800 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400 dark:focus:ring-yellow-700 dark:focus:border-yellow-700 shadow-sm text-base" placeholder="[email protected]">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-stone-700 dark:text-stone-200 mb-1">Password</label>
        <input type="password" id="password" name="password" class="mt-1 block w-full px-4 py-3 rounded-lg border border-stone-300 focus:ring-yellow-800 focus:border-yellow-800 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400 dark:focus:ring-yellow-700 dark:focus:border-yellow-700 shadow-sm text-base" placeholder="••••••••">
      </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-yellow-800 focus:ring-yellow-700 border-stone-300 rounded dark:border-stone-600 dark:bg-stone-700 dark:checked:bg-yellow-700 dark:focus:ring-offset-stone-800">
          <label for="remember-me" class="ml-2 block text-stone-700 dark:text-stone-300">Remember me</label>
        </div>
        <a href="#" class="font-medium text-yellow-800 hover:text-yellow-700 dark:text-yellow-600 dark:hover:text-yellow-500 transition-colors duration-200">Forgot your password?</a>
      </div>

      <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-medium text-white bg-yellow-800 hover:bg-yellow-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-700 dark:bg-yellow-700 dark:hover:bg-yellow-800 dark:focus:ring-offset-stone-800 transition-colors duration-300 tracking-wide">
        Sign In
      </button>
    </form>

    <p class="mt-8 text-center text-sm text-stone-600 dark:text-stone-300">
      Don't have an account?
      <a href="#" class="font-medium text-yellow-800 hover:text-yellow-700 dark:text-yellow-600 dark:hover:text-yellow-500 transition-colors duration-200">Sign up</a>
    </p>

    <!-- Art Deco Pattern Bottom -->
    <div class="relative mt-8">
      <div class="absolute -bottom-6 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-gradient-to-r from-yellow-700 to-yellow-900 rounded-t-lg shadow-md"></div>
      <div class="absolute -bottom-8 left-1/2 -translate-x-1/2 w-2/3 h-1 bg-stone-300 dark:bg-stone-600 rounded-t-lg"></div>

      <!-- Art Deco geometric lines -->
      <div class="absolute inset-x-0 top-0 text-stone-300 dark:text-stone-600 text-sm opacity-50 rotate-180">
        <svg class="mx-auto" width="100%" height="20" viewBox="0 0 100 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 10H100" stroke="currentColor" stroke-width="0.5"/>
          <path d="M10 5L90 5" stroke="currentColor" stroke-width="0.5"/>
          <path d="M20 0L80 0" stroke="currentColor" stroke-width="0.5"/>
        </svg>
      </div>
    </div>

  </div>
</div>