로그인 양식 구성 요소

<section class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden md:flex flex-col lg:flex-row border-4 border-black dark:border-white animate-fade-in">
    <div class="md:w-full p-8 md:p-10 flex flex-col justify-center">
      <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-400 mb-4 text-center tracking-tight border-b-4 border-red-500 dark:border-red-600 pb-2">
        LOGIN
      </h2>
      <p class="text-gray-600 dark:text-gray-300 text-center mb-8 font-medium">Access your exclusive fashion world.</p>
      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2 uppercase tracking-wide">Email Address</label>
          <input type="email" id="email" name="email" class="appearance-none block w-full px-4 py-3 border-4 border-black dark:border-white rounded-none shadow-sm placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-yellow-400 focus:border-yellow-400 text-gray-900 dark:text-gray-100 dark:bg-gray-700 sm:text-base" placeholder="[email protected]" required>
        </div>
        <div>
          <label for="password" class="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2 uppercase tracking-wide">Password</label>
          <input type="password" id="password" name="password" class="appearance-none block w-full px-4 py-3 border-4 border-black dark:border-white rounded-none shadow-sm placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-yellow-400 focus:border-yellow-400 text-gray-900 dark:text-gray-100 dark:bg-gray-700 sm:text-base" placeholder="••••••••" required>
        </div>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-5 w-5 text-red-500 dark:text-red-600 border-2 border-black dark:border-white focus:ring-red-500 rounded-none bg-white dark:bg-gray-700">
            <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-blue-800 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-500 transition-colors duration-200">
              Forgot your password?
            </a>
          </div>
        </div>
        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border-4 border-black dark:border-white rounded-none shadow-sm text-lg font-bold text-black dark:text-white bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700 focus:outline-none focus:ring-4 focus:ring-blue-800 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-all duration-300 transform hover:scale-105 active:scale-95 uppercase tracking-wider">
            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-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-500 transition-colors duration-200">
            Sign Up
          </a>
        </p>
      </div>
    </div>
  </div>
</section>

<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.7s ease-out forwards;
  }
</style>