Форма входа

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

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-950 dark:bg-gray-950">
  <div class="w-full max-w-md mx-auto rounded-3xl shadow-2xl p-8 transform transition-all duration-300 ease-in-out bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-indigo-950 dark:to-purple-950 border border-purple-700 dark:border-purple-800">
    <div class="text-center mb-8">
      <svg class="mx-auto h-12 w-auto text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <h2 class="mt-4 text-3xl font-extrabold text-white tracking-tight leading-tight">Sign In to Your Account</h2>
      <p class="mt-2 text-sm text-purple-200">Or <a href="#" class="font-medium text-purple-100 hover:text-purple-50 transition-colors duration-200">create a new account</a></p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-purple-200 mb-1">Email Address</label>
        <div class="relative">
          <input id="email" name="email" type="email" autocomplete="email" required
            class="appearance-none block w-full px-4 py-2 pr-10 border border-purple-600 dark:border-purple-700 rounded-lg shadow-sm placeholder-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-400 sm:text-base bg-purple-800 bg-opacity-30 text-white transition-all duration-200 ease-in-out"
            placeholder="[email protected]">
          <span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
            <svg class="h-5 w-5 text-purple-400" 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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path></svg>
          </span>
        </div>
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-purple-200 mb-1">Password</label>
        <div class="relative">
          <input id="password" name="password" type="password" autocomplete="current-password" required
            class="appearance-none block w-full px-4 py-2 pr-10 border border-purple-600 dark:border-purple-700 rounded-lg shadow-sm placeholder-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-400 sm:text-base bg-purple-800 bg-opacity-30 text-white transition-all duration-200 ease-in-out"
            placeholder="********">
          <span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
            <svg class="h-5 w-5 text-purple-400" 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="M15 7a2 2 0 012 2v5a2 2 0 01-2 2H9a2 2 0 01-2-2V9a2 2 0 012-2h6zM15 7V4a2 2 0 00-2-2H9a2 2 0 00-2 2v3m0 0H5h14m-9 4h3"></path></svg>
          </span>
        </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-5 w-5 text-purple-400 focus:ring-purple-300 border-purple-500 rounded bg-purple-700 dark:bg-purple-800 transition-colors duration-200 ease-in-out">
          <label for="remember-me" class="ml-2 block text-sm text-purple-200">Remember me</label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-100 hover:text-purple-50 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-lg shadow-lg text-lg font-semibold text-white bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-400 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5">
          Sign In
        </button>
      </div>
    </form>

    <div class="mt-8 text-center">
      <div class="relative">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <div class="w-full border-t border-purple-700"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-3 bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-indigo-950 dark:to-purple-950 text-purple-200">Or continue with</span>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-2 gap-3">
        <div>
          <a href="#"
            class="w-full inline-flex justify-center py-3 px-4 border border-purple-700 rounded-lg shadow-sm bg-purple-800 bg-opacity-40 text-sm font-medium text-white hover:bg-purple-700 dark:hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-400 transition-all duration-200 ease-in-out">
            <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18.25h-2.5V11.5H9.75V9.25h-1.5V11.5h-.75V9.25H5.25V7h2V4.75h1.5V7h1.5V4.75h-.75c-.828 0-1.5.672-1.5 1.5v1.5h.75c.828 0 1.5-.672 1.5-1.5V5.5h-.75c-.828 0-1.5.672-1.5 1.5V9.25H8.25V7h-1.5V4.75h1.5V7h1.5V4.75h.75c.828 0 1.5-.672 1.5-1.5V9.25h-1.5v2.25h-1.5v6.75zm1.5-1.5H16V9.25h-1.5v8.25z" />
            </svg>
            Google
          </a>
        </div>

        <div>
          <a href="#"
            class="w-full inline-flex justify-center py-3 px-4 border border-purple-700 rounded-lg shadow-sm bg-purple-800 bg-opacity-40 text-sm font-medium text-white hover:bg-purple-700 dark:hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-400 transition-all duration-200 ease-in-out">
            <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18.25h-2.5V11.5H9.75V9.25h1.5V11.5h.75V9.25H5.25V7h2.25V4.75H8V7h1.5V4.75h.75c.828 0 1.5-.672 1.5-1.5V9.25h-1.5V11.5h-1.5v6.75zm1.5-1.5H16V9.25h-1.5v8.25zM12 10.5h-1.5V7H12v3.5zm-1.5-4h1.5V4.75H10.5V6.5z" />
            </svg>
            GitHub
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
              

                <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-2xl overflow-hidden md:max-w-xl transition-all duration-300 transform scale-95 md:scale-100 hover:shadow-3xl">
    <div class="md:flex">
      <div class="w-full p-8 md:p-10">
        <div class="text-center mb-8">
          <svg class="mx-auto h-12 w-auto text-yellow-700 dark:text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
          <h2 class="mt-6 text-3xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight">Welcome Back!</h2>
          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Sign in to continue to your account.</p>
        </div>

        <form class="space-y-6">
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
            <div class="mt-1 relative rounded-md shadow-sm">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 00-.75.75v3a.75.75 0 00.75.75h7.5a.75.75 0 00.75-.75v-3z" />
                </svg>
              </div>
              <input type="email" id="email" name="email" autocomplete="email" required class="focus:ring-yellow-500 focus:border-yellow-500 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out" placeholder="[email protected]">
            </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 relative rounded-md shadow-sm">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
              </div>
              <input type="password" id="password" name="password" autocomplete="current-password" required class="focus:ring-yellow-500 focus:border-yellow-500 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out" placeholder="••••••••">
            </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-yellow-600 dark:text-yellow-500 focus:ring-yellow-500 border-gray-300 dark:border-gray-600 rounded">
              <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-yellow-600 dark:text-yellow-500 hover:text-yellow-500 dark:hover:text-yellow-400 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-medium text-white bg-yellow-700 hover:bg-yellow-800 dark:bg-yellow-600 dark:hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-100">
              Sign in
            </button>
          </div>
        </form>

        <div class="mt-6">
          <div class="relative">
            <div class="absolute inset-0 flex items-center" aria-hidden="true">
              <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 inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-800">
                <svg class="mr-2 h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.873V13.86h-2.54V10h2.54V7.584c0-2.508 1.493-3.89 3.774-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.262c-1.225 0-1.624.766-1.624 1.569V10h2.775l-.444 3.86h-2.33V20C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd" />
                </svg>
                Facebook
              </a>
            </div>

            <div>
              <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-800">
                <svg class="mr-2 h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M6.29 15.932A8 8 0 103 10a8.01 8.01 0 003.29 5.932L2 18l3.932-4.29zM10 12a2 2 0 100-4 2 2 0 000 4z"/>
                </svg>
                Google
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>