ログインフォーム

                <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>
              

                <div class="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-black p-4 flex items-center justify-center dark:from-black dark:via-gray-950 dark:to-indigo-950">
  <div class="w-full max-w-sm p-6 rounded-lg shadow-lg relative overflow-hidden transform transition-all duration-300 hover:scale-105
              bg-gray-800 border-2 border-fuchsia-500
              dark:bg-gray-900 dark:border-indigo-600">
    
    <!-- Cyberpunk Glitchy Border Effect (Pseudo-elements or multiple layers for complex effects) -->
    <div class="absolute inset-0 border-2 border-fuchsia-700 opacity-20 animate-pulse-slow pointer-events-none rounded-lg dark:border-indigo-800"></div>

    <h2 class="text-3xl font-extrabold text-center mb-6 
               text-fuchsia-400 drop-shadow-[0_0_5px_rgba(232,121,249,0.7)]
               dark:text-indigo-400 dark:drop-shadow-[0_0_5px_rgba(129,140,248,0.7)]">
      LOG<span class="text-pink-300">//</span>IN
    </h2>

    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium 
                                  text-fuchsia-200 dark:text-indigo-200
                                  mb-1">
          User//ID
        </label>
        <input type="email" id="email" name="email" required
               class="mt-1 block w-full px-4 py-2 rounded-md 
                      bg-gray-700 text-fuchsia-100 placeholder-pink-200
                      border border-fuchsia-500 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 focus:border-transparent
                      dark:bg-gray-800 dark:text-indigo-100 dark:placeholder-blue-200
                      dark:border-indigo-600 dark:focus:ring-indigo-400">
      </div>

      <div>
        <label for="password" class="block text-sm font-medium 
                                     text-fuchsia-200 dark:text-indigo-200
                                     mb-1">
          Pass//KEY
        </label>
        <input type="password" id="password" name="password" required
               class="mt-1 block w-full px-4 py-2 rounded-md
                      bg-gray-700 text-fuchsia-100 placeholder-pink-200
                      border border-fuchsia-500 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 focus:border-transparent
                      dark:bg-gray-800 dark:text-indigo-100 dark:placeholder-blue-200
                      dark:border-indigo-600 dark:focus:ring-indigo-400">
      </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-fuchsia-500 rounded border-gray-600
                        focus:ring-fuchsia-400
                        dark:text-indigo-500 dark:border-gray-700 dark:focus:ring-indigo-400">
          <label for="remember_me" class="ml-2 
                                        text-fuchsia-200 dark:text-indigo-200">
            REMEMBER//ME
          </label>
        </div>
        <a href="#" class="font-medium 
                           text-fuchsia-400 hover:text-fuchsia-300 drop-shadow-[0_0_3px_rgba(232,121,249,0.5)] 
                           dark:text-indigo-400 dark:hover:text-indigo-300 dark:drop-shadow-[0_0_3px_rgba(129,140,248,0.5)]">
          FORGET//PASS?
        </a>
      </div>

      <button type="submit"
              class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-base font-medium 
                     bg-gradient-to-r from-fuchsia-600 to-purple-600 text-white 
                     hover:from-fuchsia-500 hover:to-purple-500
                     focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-fuchsia-400
                     transform transition duration-150 ease-in-out glow-on-hover
                     dark:from-indigo-600 dark:to-blue-600 dark:hover:from-indigo-500 dark:hover:to-blue-500
                     dark:focus:ring-indigo-400">
        ACCESS//SYSTEM
      </button>
    </form>

    <p class="mt-6 text-center text-sm 
              text-fuchsia-300 dark:text-indigo-300">
      Don't have an ACCOUNT//?
      <a href="#" class="font-medium 
                         text-fuchsia-400 hover:text-fuchsia-300 drop-shadow-[0_0_3px_rgba(232,121,249,0.5)]
                         dark:text-indigo-400 dark:hover:text-indigo-300 dark:drop-shadow-[0_0_3px_rgba(129,140,248,0.5)]">
        SIGN//UP
      </a>
    </p>
  </div>
</div>

<style>
/* Basic keyframes for a subtle glow/pulse effect. 
   In a real project, this might be in a CSS file or more advanced using JS. */
@keyframes pulse-slow {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.4; }
}

.animate-pulse-slow {
  animation: pulse-slow 3s infinite ease-in-out;
}

.glow-on-hover {
  /* Tailwind's shadow/ring usually handle this, but adding a custom glow for more cyberpunk feel */
  box-shadow: 0 0 10px rgba(232, 121, 249, 0.4);
  transition: box-shadow 0.2s ease-in-out;
}
.dark .glow-on-hover {
  box-shadow: 0 0 10px rgba(129, 140, 248, 0.4);
}
.glow-on-hover:hover {
  box-shadow: 0 0 15px rgba(232, 121, 249, 0.7);
}
.dark .glow-on-hover:hover {
  box-shadow: 0 0 15px rgba(129, 140, 248, 0.7);
}
</style>
              

                <div class="min-h-screen bg-stone-100 flex items-center justify-center p-4 dark:bg-stone-900 font-sans">
  <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden max-w-lg w-full transform transition-all duration-300 sm:scale-100 md:scale-95 lg:scale-90">
    <div class="px-8 py-6 bg-stone-200 dark:bg-stone-700 relative">
      <div class="absolute top-0 left-0 w-8 h-8 md:w-12 md:h-12 bg-amber-400"></div>
      <div class="absolute bottom-0 right-0 w-8 h-8 md:w-12 md:h-12 bg-red-400"></div>
      <h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 text-center relative z-10 py-4">Login to Your Account</h2>
    </div>
    <form class="p-8 space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Email Address</label>
        <input type="email" id="email" name="email" autocomplete="email" required class="block w-full px-4 py-3 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-stone-50 dark:bg-stone-700 text-stone-900 dark:text-stone-100 transition-colors duration-200 text-base sm:text-lg">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Password</label>
        <input type="password" id="password" name="password" autocomplete="current-password" required class="block w-full px-4 py-3 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-stone-50 dark:bg-stone-700 text-stone-900 dark:text-stone-100 transition-colors duration-200 text-base sm:text-lg">
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-600 rounded dark:bg-stone-700">
          <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-200">Remember me</label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300 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 border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-400 transition-colors duration-200">
          Sign in
        </button>
      </div>
    </form>
    <div class="px-8 py-6 bg-stone-50 dark:bg-stone-900 border-t border-stone-200 dark:border-stone-700 text-center text-sm text-stone-600 dark:text-stone-400">
      Don't have an account? <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300 transition-colors duration-200">Sign up</a>
    </div>
  </div>
</div>
              

                <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>
              

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 space-y-6 transform hover:scale-[1.01] transition-all duration-300 ease-in-out">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center tracking-tight leading-tight">
      Welcome Back!
    </h2>
    <p class="text-center text-gray-500 dark:text-gray-400 text-sm md:text-base">
      Sign in to manage your bookings and reservations.
    </p>
    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
          Email address
        </label>
        <input
          id="email"
          name="email"
          type="email"
          autocomplete="email"
          required
          class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-200 ease-in-out hover:border-gray-400 dark:hover:border-gray-500 focus:ring-2 focus:ring-offset-1 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800"
          placeholder="[email protected]"
        />
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
          Password
        </label>
        <input
          id="password"
          name="password"
          type="password"
          autocomplete="current-password"
          required
          class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-200 ease-in-out hover:border-gray-400 dark:hover:border-gray-500 focus:ring-2 focus:ring-offset-1 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800"
          placeholder="••••••••"
        />
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input
            id="remember-me"
            name="remember-me"
            type="checkbox"
            class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-gray-300 rounded dark:border-gray-600 dark:checked:bg-amber-600 dark:checked:border-transparent transition-transform duration-200 ease-in-out transform hover:scale-110 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800"
          />
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
            Remember me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200 ease-in-out">
            Forgot your password?
          </a>
        </div>
      </div>

      <div>
        <button
          type="submit"
          class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-semibold text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-gray-800 transition-all duration-200 ease-in-out transform hover:scale-[1.01] active:scale-95"
        >
          Sign in
        </button>
      </div>
    </form>

    <div class="text-center text-sm md:text-base">
      <p class="text-gray-600 dark:text-gray-400">
        Don't have an account?
        <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200 ease-in-out">
          Sign up now
        </a>
      </p>
    </div>
  </div>
</div>
              

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-lime-100 via-green-50 to-blue-50 dark:from-slate-800 dark:via-gray-900 dark:to-stone-950">
  <div class="max-w-md w-full p-8 space-y-8 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm rounded-3xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden relative group">
    <!-- Organic Shape Background -->
    <div class="absolute top-0 left-0 w-full h-full transform -translate-x-1/2 -translate-y-1/2 -rotate-45 bg-gradient-to-br from-green-200/50 to-blue-200/50 dark:from-emerald-900/50 dark:to-cyan-900/50 rounded-full opacity-60 group-hover:scale-110 transition-transform duration-500 ease-in-out" style="width: 200%; height: 200%; border-radius: 60% 40% 70% 30% / 30% 60% 40% 70%;"></div>
    <div class="absolute bottom-0 right-0 w-full h-full transform translate-x-1/2 translate-y-1/2 rotate-45 bg-gradient-to-tl from-yellow-100/50 to-lime-100/50 dark:from-orange-900/50 dark:to-lime-900/50 rounded-full opacity-60 group-hover:scale-110 transition-transform duration-500 ease-in-out" style="width: 150%; height: 150%; border-radius: 40% 60% 30% 70% / 70% 30% 60% 40%;"></div>

    <div class="relative z-10">
      <div class="text-center">
        <img class="mx-auto h-16 w-auto mb-4 rounded-full shadow-lg border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/lego/6.jpg" alt="Music Wave Logo">
        <h2 class="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white leading-tight tracking-wider">
          Harmony Connect
        </h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
          Sign in to your musical journey
        </p>
      </div>

      <form class="mt-8 space-y-6" action="#" method="POST">
        <div class="rounded-md shadow-sm -space-y-px">
          <div>
            <label for="email-address" class="sr-only">Email address</label>
            <input id="email-address" name="email" type="email" autocomplete="email" required
                   class="appearance-none rounded-t-lg relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:focus:ring-emerald-600 dark:focus:border-emerald-600 sm:text-base bg-white/80 dark:bg-gray-700/80 transition-colors duration-200"
                   placeholder="Email address">
          </div>
          <div>
            <label for="password" class="sr-only">Password</label>
            <input id="password" name="password" type="password" autocomplete="current-password" required
                   class="appearance-none rounded-b-lg relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:focus:ring-emerald-600 dark:focus:border-emerald-600 sm:text-base bg-white/80 dark:bg-gray-700/80 transition-colors duration-200"
                   placeholder="Password">
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox"
                   class="h-4 w-4 text-green-600 dark:text-emerald-500 focus:ring-green-500 dark:focus:ring-emerald-600 border-gray-300 dark:border-gray-600 rounded cursor-pointer">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-green-600 hover:text-green-500 dark:text-emerald-500 dark:hover:text-emerald-400 transtion-colors duration-200">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit"
                  class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-br from-green-600 to-lime-600 hover:from-green-700 hover:to-lime-700 dark:from-emerald-600 dark:to-cyan-600 dark:hover:from-emerald-700 dark:hover:to-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-emerald-600 transition-all transform hover:-translate-y-0.5 shadow-md hover:shadow-lg focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <svg class="h-5 w-5 text-green-200 group-hover:text-green-100 dark:text-emerald-200 dark:group-hover:text-emerald-100 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
              </svg>
            </span>
            Sign in
          </button>
        </div>

        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white/70 dark:bg-gray-800/70 text-gray-500 dark:text-gray-400 rounded-full shadow-sm">
              Or continue with
            </span>
          </div>
        </div>

        <div class="mt-6 grid grid-cols-2 gap-3">
          <div>
            <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm text-sm font-medium text-gray-700 dark:text-gray-100 bg-white/80 dark:bg-gray-700/80 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:-translate-y-0.5">
              <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 1792 1792">
                <path d="M1344 640q-.25 43.75-29.75 87.75t-68 81.75q-38 37-97.5 76t-129.5 73q-69 34-118 34-93 0-141-55.5t-48-142.5v-288q0-74 48-142.5t141-55.5q49 0 118 34 60 29 129.5 73t97.5 76q38.25 37.75 68 81.75t29.75 87.75zM1792 896q0 307-178.5 547.5T1143 1792V1088h-308V896h308V672q0-109 45-168t141-59q75 0 114 4t67 2zm-1792 0q0-307 178.5-547.5T649 0l-7 1h308v192H0v608z"/>
              </svg>
              Google
            </button>
          </div>

          <div>
            <button class="w-full flex items-center justify-center px-4 py-2 border border-blue-400 dark:border-[#4267B2] rounded-xl shadow-sm text-sm font-medium text-[#4267B2] dark:text-[#E0E0E0] bg-blue-50/80 dark:bg-[#4267B2]/80 hover:bg-blue-100 dark:hover:bg-[#3D5A9C] transition-colors duration-200 transform hover:-translate-y-0.5">
              <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
                <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.99 3.65 9.12 8.43 9.87v-7.74H7.63V12h2.8V9.39c0-2.78 1.6-4.32 4.19-4.32 1.25 0 2.37.09 2.68.13v2.96h-1.76c-1.38 0-1.65.65-1.65 1.62V12h3.29l-.53 3.25h-2.76V22C18.35 21.12 22 16.99 22 12z"/>
              </svg>
              Facebook
            </button>
          </div>
        </div>

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

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

                <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>
              

                <div class="min-h-screen flex items-center justify-center p-4 bg-lime-200 dark:bg-zinc-900 border-4 border-solid border-black dark:border-lime-500">
  <div class="w-full max-w-md bg-lime-400 dark:bg-zinc-800 p-8 pt-6 rounded-none shadow-brutalist border-8 border-black dark:border-lime-500 animate-fade-in">
    <h2 class="text-4xl sm:text-5xl font-black text-black dark:text-lime-400 mb-6 uppercase tracking-extra-wide leading-tight border-b-8 border-black dark:border-lime-500 pb-2">
      INITIATE LOGIN
    </h2>
    <form class="space-y-6">
      <div>
        <label for="email" class="block text-base sm:text-lg font-bold text-black dark:text-lime-300 mb-2 uppercase tracking-wide">ACCESS CODE:</label>
        <input
          type="email"
          id="email"
          class="w-full p-4 text-lg bg-yellow-300 dark:bg-zinc-700 text-black dark:text-lime-200 placeholder-black dark:placeholder-lime-400 border-4 border-black dark:border-lime-500 focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-lime-600 rounded-none transform transition-all duration-200 ease-in-out focus:scale-105"
          placeholder="ENTER EMAIL PROTOCOL"
          required
        />
      </div>
      <div>
        <label for="password" class="block text-base sm:text-lg font-bold text-black dark:text-lime-300 mb-2 uppercase tracking-wide">SECURE PHRASE:</label>
        <input
          type="password"
          id="password"
          class="w-full p-4 text-lg bg-yellow-300 dark:bg-zinc-700 text-black dark:text-lime-200 placeholder-black dark:placeholder-lime-400 border-4 border-black dark:border-lime-500 focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-lime-600 rounded-none transform transition-all duration-200 ease-in-out focus:scale-105"
          placeholder="ENCRYPTED PASSCODE"
          required
        />
      </div>
      <button
        type="submit"
        class="w-full py-4 text-xl font-extrabold bg-lime-600 dark:bg-lime-500 text-black dark:text-zinc-900 uppercase border-8 border-black dark:border-lime-500 hover:bg-lime-700 dark:hover:bg-lime-600 focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-lime-800 active:bg-lime-800 dark:active:bg-lime-700 transition-all duration-150 ease-in-out transform hover:-translate-y-1 hover:scale-105 shadow-brutalist-button"
      >
        INITIATE <span class="hidden sm:inline-block">DIRECTIVE</span>
      </button>
      <p class="text-sm text-black dark:text-lime-200 text-center font-mono">
        <a href="#" class="underline text-black dark:text-lime-300 hover:text-black dark:hover:text-lime-400 transition-colors duration-200">
          FORGOTTEN SECURE PHRASE? <span class="hidden sm:inline-block">RETRIEVE</span>
        </a>
      </p>
    </form>
  </div>
</div>

<style>
  /* Custom properties for brutalist shadow effects */
  .shadow-brutalist {
    box-shadow: 16px 16px 0px 0px black;
  }
  .dark .shadow-brutalist {
    box-shadow: 16px 16px 0px 0px var(--tw-dark-border-color, #a7f3d0); /* Using lime-500 for dark border shadow */
  }
  .shadow-brutalist-button {
    box-shadow: 8px 8px 0px 0px black;
  }
  .dark .shadow-brutalist-button {
    box-shadow: 8px 8px 0px 0px var(--tw-dark-border-color, #a7f3d0); /* Using lime-500 for dark border shadow */
  }
  .tracking-extra-wide {
    letter-spacing: 0.15em;
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
  }
</style>
              

                <div class="p-4 sm:p-6 md:p-8 min-h-screen flex items-center justify-center bg-green-100 dark:bg-stone-900 font-sans">
  <div class="w-full max-w-md p-6 sm:p-8 md:p-10 bg-white dark:bg-stone-800 rounded-3xl shadow-xl transform transition-all duration-300 hover:scale-[1.02] border border-green-200 dark:border-stone-700">
    <div class="flex justify-center mb-6 sm:mb-8">
      <img src="https://picsum.photos/100/100?random=1" alt="Sports Logo" class="rounded-full w-20 h-20 sm:w-24 sm:h-24 object-cover border-4 border-green-500 dark:border-green-600 shadow-md animate-bounce-slow">
    </div>
    <h2 class="text-center text-3xl sm:text-4xl font-extrabold text-green-800 dark:text-green-300 mb-4 sm:mb-6 leading-tight">
      Welcome Back, Athlete!
    </h2>
    <p class="text-center text-stone-600 dark:text-stone-400 mb-6 sm:mb-8 text-base sm:text-lg">
      Sign in to manage your team or track your fitness journey.
    </p>

    <form>
      <div class="mb-4 sm:mb-5">
        <label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2">
          Email Address
        </label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="[email protected]"
          class="shadow-sm appearance-none border border-green-300 dark:border-stone-700 rounded-xl w-full py-3 px-4 text-stone-700 dark:text-stone-200 leading-tight focus:outline-none focus:ring-4 focus:ring-green-200 dark:focus:ring-green-700 focus:border-transparent bg-green-50 dark:bg-stone-700 transition-all duration-200 placeholder:text-stone-400 dark:placeholder:text-stone-500"
          aria-label="Email Address"
        />
      </div>
      <div class="mb-6 sm:mb-7">
        <label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2">
          Password
        </label>
        <input
          type="password"
          id="password"
          name="password"
          placeholder="**********"
          class="shadow-sm appearance-none border border-green-300 dark:border-stone-700 rounded-xl w-full py-3 px-4 text-stone-700 dark:text-stone-200 leading-tight focus:outline-none focus:ring-4 focus:ring-green-200 dark:focus:ring-green-700 focus:border-transparent bg-green-50 dark:bg-stone-700 transition-all duration-200 placeholder:text-stone-400 dark:placeholder:text-stone-500"
          aria-label="Password"
        />
      </div>
      <div class="flex items-center justify-between mb-6 sm:mb-8">
        <a href="#" class="inline-block align-baseline font-bold text-sm text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 transition-colors duration-200">
          Forgot Password?
        </a>
        <button
          type="submit"
          class="bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 text-white font-bold py-3 px-6 rounded-full focus:outline-none focus:shadow-outline transform transition-all duration-200 hover:scale-105 active:scale-95 shadow-lg shadow-green-300/50 dark:shadow-green-900/50 flex items-center gap-2"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <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"></path>
          </svg>
          Sign In
        </button>
      </div>
      <p class="text-center text-stone-600 dark:text-stone-400 text-sm">
        Don't have an account? <a href="#" class="font-bold text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 transition-colors duration-200">Sign Up</a>
      </p>
    </form>
  </div>
  <style>
    @keyframes bounce-slow {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    .animate-bounce-slow {
      animation: bounce-slow 3s infinite ease-in-out;
    }
  </style>
</div>
              

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <img class="mx-auto h-12 w-auto" src="https://picsum.photos/id/1018/100/100" alt="News Outlet Logo">
    <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">
      Sign in to your account
    </h2>
    <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400 max-w">
      Or
      <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300">
        create a new account
      </a>
    </p>
  </div>

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow-xl rounded-lg sm:px-10 border border-gray-200 dark:border-gray-700">
      <form class="space-y-6" action="#" method="POST">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Email address
          </label>
          <div class="mt-1">
            <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Password
          </label>
          <div class="mt-1">
            <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100">
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:checked:bg-purple-600">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 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-purple-400 dark:hover:text-purple-300">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-pink-500 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-offset-gray-800">
            Sign in
          </button>
        </div>
      </form>

      <div class="mt-6">
        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300 dark:border-gray-600"></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="mt-6 grid grid-cols-2 gap-3">
          <div>
            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 dark:border-gray-600 rounded-md 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">
              <img class="h-5 w-5" src="https://www.svgrepo.com/show/303108/github-icon-svg-logo.svg" alt="GitHub">
              <span class="ml-2">GitHub</span>
            </a>
          </div>
          <div>
            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 dark:border-gray-600 rounded-md 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">
              <img class="h-5 w-5" src="https://www.svgrepo.com/show/303112/google-icon-svg-logo.svg" alt="Google">
              <span class="ml-2">Google</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>