Gaming_Material_Form

<div class="min-h-screen bg-gradient-to-br from-purple-800 via-pink-600 to-orange-400 dark:from-gray-900 dark:via-purple-900 dark:to-teal-900 p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans">

  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden
              p-6 sm:p-8 lg:p-10 border-t-4 border-purple-600 dark:border-pink-500 transform hover:scale-105">

    <div class="text-center mb-8">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-2 tracking-tight drop-shadow-md">
        <span class="text-purple-700 dark:text-pink-500">Gamer</span> Login
      </h2>
      <p class="text-gray-600 dark:text-gray-400 text-md sm:text-lg">Enter the Arena!</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Username</label>
        <div class="relative">
          <input type="text" id="username" name="username" placeholder="PlayerOne" required
                 class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 block
                       dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 placeholder-gray-500 text-gray-900
                       transition duration-200 ease-in-out transform hover:scale-[1.01] focus:ring-2 focus:outline-none">
          <svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 100 4v2a2 2 0 10-4 0v-2a2 2 0 100-4h-3a2 2 0 100 4v2a2 2 0 10-4 0v-2a2 2 0 100-4H7a2 2 0 100 4v2a2 2 0 10-4 0v-2a2 2 0 100-4h-3" />
          </svg>
        </div>
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
        <div class="relative">
          <input type="password" id="password" name="password" placeholder="********" required
                 class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-pink-500 focus:border-pink-500 block
                       dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 placeholder-gray-500 text-gray-900
                       transition duration-200 ease-in-out transform hover:scale-[1.01] focus:ring-2 focus:outline-none">
         <svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2v5a2 2 0 01-2 2H9a2 2 0 01-2-2V9a2 2 0 012-2h6z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14H4a2 2 0 01-2-2V8a2 2 0 012-2h4" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 10h4a2 2 0 012 2v4a2 2 0 01-2 2h-4" />
          </svg>
        </div>
      </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-purple-600 dark:text-orange-400 focus:ring-purple-500 dark:focus:ring-orange-400 border-gray-300 rounded">
          <label for="remember-me" class="ml-2 block text-gray-700 dark:text-gray-300">
            Remember Me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-orange-400 dark:hover:text-amber-300 transition-colors duration-200">
            Forgot Password?
          </a>
        </div>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-lg text-lg sm:text-xl font-bold text-white
                       bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600
                       dark:from-pink-500 dark:to-orange-400 dark:hover:from-pink-600 dark:hover:to-orange-500
                       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-orange-400
                       transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95
                       animate-pulse-on-hover">
          Level Up!
        </button>
      </div>
    </form>

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

  </div>
</div>