Brutalist_Login_Form_Travel_Tourism

<div class="min-h-screen flex items-center justify-center p-4 bg-lime-200 dark:bg-gray-900 font-mono transition-colors duration-300">
  <div class="w-full max-w-md bg-yellow-400 dark:bg-gray-800 border-4 border-black dark:border-red-500 shadow-[8px_8px_0_0_black] dark:shadow-[8px_8px_0_0_red] transform -rotate-2 hover:rotate-0 transition-all duration-300 ease-in-out p-8 md:p-12 space-y-8 relative overflow-hidden">
    <div class="absolute top-0 left-0 w-16 h-16 bg-fuchsia-600 dark:bg-sky-500 rounded-br-full z-0"></div>
    <div class="absolute bottom-0 right-0 w-24 h-24 bg-teal-500 dark:bg-orange-500 rounded-tl-full z-0"></div>

    <h2 class="text-5xl md:text-6xl font-extrabold text-black dark:text-yellow-400 text-center uppercase leading-tight tracking-tighter relative z-10 drop-shadow-[4px_4px_0_black] dark:drop-shadow-[4px_4px_0_red]">
      <span class="block">Embark</span> <span class="block">Login</span>
    </h2>
    <p class="text-lg text-black dark:text-gray-200 text-center relative z-10 border-t-2 border-b-2 border-black dark:border-red-500 py-2">
      Adventure Awaits! Sign in to book your next journey.
    </p>

    <form class="space-y-6 relative z-10">
      <div>
        <label for="email" class="block text-black dark:text-yellow-400 text-xl font-bold uppercase mb-2 border-b-2 border-black dark:border-red-500 pb-1">
          Email
        </label>
        <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full p-4 bg-blue-300 dark:bg-gray-700 text-black dark:text-white border-4 border-black dark:border-red-500 focus:outline-none focus:ring-4 focus:ring-fuchsia-600 dark:focus:ring-sky-500 text-xl font-bold transition-all duration-200 placeholder-black dark:placeholder-gray-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" required>
      </div>
      <div>
        <label for="password" class="block text-black dark:text-yellow-400 text-xl font-bold uppercase mb-2 border-b-2 border-black dark:border-red-500 pb-1">
          Password
        </label>
        <input type="password" id="password" name="password" placeholder="your_secret_path" class="w-full p-4 bg-emerald-300 dark:bg-gray-700 text-black dark:text-white border-4 border-black dark:border-red-500 focus:outline-none focus:ring-4 focus:ring-fuchsia-600 dark:focus:ring-sky-500 text-xl font-bold transition-all duration-200 placeholder-black dark:placeholder-gray-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" 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-6 w-6 text-fuchsia-600 dark:text-sky-500 border-4 border-black dark:border-red-500 focus:ring-fuchsia-600 dark:focus:ring-sky-500 bg-white dark:bg-gray-700 checked:bg-fuchsia-600 dark:checked:bg-sky-500 transition-colors duration-200 relative top-1">
          <label for="remember-me" class="ml-3 text-lg font-bold text-black dark:text-gray-200 uppercase">
            Remember Me
          </label>
        </div>
        <a href="#" class="font-bold text-lg text-black dark:text-red-500 underline hover:no-underline transition-all duration-200 uppercase relative z-10">
          Forgot Password?
        </a>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-4 px-6 border-4 border-black dark:border-red-500 shadow-[6px_6px_0_0_black] dark:shadow-[6px_6px_0_0_red] bg-violet-600 dark:bg-green-500 text-white dark:text-black hover:bg-yellow-500 dark:hover:bg-red-500 hover:text-black dark:hover:text-black text-2xl uppercase tracking-widest font-extrabold focus:outline-none focus:ring-4 focus:ring-fuchsia-600 dark:focus:ring-sky-500 transform hover:translate-x-1 hover:translate-y-1 transition-all duration-200 relative z-10">
          Login to Explore
        </button>
      </div>
    </form>

    <p class="mt-8 text-center text-lg text-black dark:text-gray-200 relative z-10">
      Don't have an account?
      <a href="#" class="font-bold text-lg text-black dark:text-green-500 underline hover:no-underline transition-all duration-200 uppercase ml-2">
        Register Here!
      </a>
    </p>

    <div class="absolute -left-16 -bottom-16 w-32 h-32 bg-purple-500 dark:bg-cyan-500 rounded-full opacity-50 blur-xl z-0 pointer-events-none"></div>
    <div class="absolute -right-16 -top-16 w-40 h-40 bg-pink-500 dark:bg-yellow-500 rounded-full opacity-50 blur-xl z-0 pointer-events-none"></div>
  </div>
</div>