로그인 양식 구성 요소

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl flex flex-col md:flex-row w-full max-w-4xl overflow-hidden">

    <!-- Image Section -->
    <div class="md:w-1/2 p-0 relative">
      <img src="https://picsum.photos/800/600?random=1" alt="Login Illustration" class="w-full h-full object-cover">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-75"></div>
      <div class="absolute bottom-6 left-6 text-white text-3xl font-bold">Welcome Back!</div>
    </div>

    <!-- Login Form Section -->
    <div class="md:w-1/2 p-8 md:p-12 space-y-8 flex flex-col justify-center">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center">Login to Your Account</h2>

      <form class="space-y-6">

        <!-- Email Input with Microinteraction -->
        <div class="relative group">
          <input type="email" id="email" class="peer h-12 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:border-purple-600 dark:focus:border-purple-400 bg-transparent" placeholder="Email address" />
          <label for="email" class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:-top-3.5 peer-focus:text-purple-600 dark:peer-focus:text-purple-400 peer-focus:text-sm">Email address</label>
          <svg class="absolute right-3 top-3 text-gray-400 dark:text-gray-500 group-focus-within:text-purple-600 dark:group-focus-within:text-purple-400 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
        </div>

        <!-- Password Input with Microinteraction -->
        <div class="relative group animate-fade-in-up">
          <input type="password" id="password" class="peer h-12 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:border-purple-600 dark:focus:border-purple-400 bg-transparent" placeholder="Password" />
          <label for="password" class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:-top-3.5 peer-focus:text-purple-600 dark:peer-focus:text-purple-400 peer-focus:text-sm">Password</label>
          <svg class="absolute right-3 top-3 text-gray-400 dark:text-gray-500 group-focus-within:text-purple-600 dark:group-focus-within:text-purple-400 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
        </div>

        <!-- Remember Me & Forgot Password -->
        <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-purple-600 dark:text-purple-400 focus:ring-purple-500 border-gray-300 rounded dark:border-gray-600">
            <label for="remember_me" class="ml-2 block text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
          <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200">Forgot your password?</a>
        </div>

        <!-- Login Button with Microinteraction -->
        <div>
          <button type="submit" class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-lg font-medium rounded-md text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-800 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <svg class="h-6 w-6 text-purple-200 group-hover:text-purple-100 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
              </svg>
            </span>
            Sign in
          </button>
        </div>
      </form>

      <!-- Social Login Options (Example Microinteraction) -->
      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-700"></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">Or continue with</span>
        </div>
      </div>

      <div class="flex justify-center space-x-4">
        <button class="flex items-center justify-center p-3 border border-gray-300 dark:border-gray-600 rounded-full shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 transform hover:-translate-y-1 transition-transform duration-200">
          <img class="h-5 w-5 mr-2" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google">
          Google
        </button>
        <button class="flex items-center justify-center p-3 border border-gray-300 dark:border-gray-600 rounded-full shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transform hover:-translate-y-1 transition-transform duration-200">
          <img class="h-5 w-5 mr-2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Facebook_Logo_%282019%29.png/1200px-Facebook_Logo_%282019%29.png" alt="Facebook">
          Facebook
        </button>
      </div>

      <div class="text-center text-sm text-gray-600 dark:text-gray-400 mt-6">
        Don't have an account? 
        <a href="#" class="font-medium text-purple-600 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 transition-colors duration-200">Sign up</a>
      </div>

    </div>
  </div>
</div>

<!-- To enable micro-interactions, you would typically use JavaScript. 
     However, for the purpose of this request, some CSS-only micro-interactions 
     are simulated using Tailwind's `group` and `peer` modifiers, 
     and `hover` / `active` / `focus` pseudo-classes for basic animations. 
     More complex animations would require a JS framework like React/Vue/Angular, 
     or plain JS with Web Animations API or CSS keyframe animations. -->