로그인 양식 구성 요소

<div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-mono text-gray-800 dark:text-gray-200">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 space-y-6">
      <h2 class="text-2xl font-bold text-center border-b border-gray-300 dark:border-gray-600 pb-4 tracking-tight">
        <span class="text-blue-600 dark:text-blue-400">Login</span> // Marketplace
      </h2>

      <form class="space-y-4">
        <div>
          <label for="email" class="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
            <span class="text-blue-500 dark:text-blue-300">user@</span>email:
          </label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="[email protected]"
            class="w-full px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 text-sm placeholder-gray-400 dark:placeholder-gray-500 outline-none transition-colors duration-200"
            aria-label="Email address"
            required
          />
        </div>

        <div>
          <label for="password" class="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
            <span class="text-blue-500 dark:text-blue-300">pass@</span>word:
          </label>
          <input
            type="password"
            id="password"
            name="password"
            placeholder="***************"
            class="w-full px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 text-sm placeholder-gray-400 dark:placeholder-gray-500 outline-none transition-colors duration-200"
            aria-label="Password"
            required
          />
        </div>

        <div class="flex items-center justify-between text-sm">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded outline-none p-1 -m-1">
            Forgot Password?
          </a>
          <div class="sr-only">Persistent Login</div>
          <label for="remember" class="flex items-center cursor-pointer">
            <input type="checkbox" id="remember" name="remember" class="h-4 w-4 text-blue-600 dark:text-blue-400 rounded border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-200">
            <span class="ml-2 text-gray-700 dark:text-gray-300">Remember Me</span>
          </label>
        </div>

        <button
          type="submit"
          class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white rounded-md font-medium text-lg tracking-wide transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800"
        >
          <span class="animate-pulse pr-1">_</span> login()
        </button>
      </form>

      <p class="text-center text-sm text-gray-600 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-4">
        <span class="text-blue-600 dark:text-blue-400">//</span> Don't have an account?
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded outline-none p-1 -m-1">
          _register()
        </a>
      </p>
    </div>
  </div>
</div>