OAuth Buttons Component

<div class="min-h-screen bg-neutral-100 p-8 flex items-center justify-center dark:bg-neutral-900">
  <div class="max-w-4xl w-full bg-white border-4 border-black p-10 shadow-[8px_8px_0_0_#000] dark:bg-neutral-800 dark:border-white dark:shadow-[8px_8px_0_0_#fff] relative">
    <div class="absolute top-0 left-0 -mt-2 -ml-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>
    <div class="absolute top-0 right-0 -mt-2 -mr-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>
    <div class="absolute bottom-0 left-0 -mb-2 -ml-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>
    <div class="absolute bottom-0 right-0 -mb-2 -mr-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>

    <h2 class="text-5xl md:text-7xl font-extrabold text-blue-700 mb-8 text-center uppercase tracking-tighter dark:text-orange-400 leading-none">
      Connect Your Profile
      <span class="block text-2xl md:text-4xl text-black dark:text-white mt-2">Showcase Your Brilliance</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-yellow-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-yellow-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506497/google.svg" alt="Google" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with Google
      </button>

      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-green-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-green-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506499/github.svg" alt="GitHub" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with GitHub
      </button>

      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-purple-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-purple-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506518/linkedin.svg" alt="LinkedIn" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with LinkedIn
      </button>

      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-pink-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-pink-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506506/twitter.svg" alt="X" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with X
      </button>
    </div>

    <div class="mt-10 text-center">
      <p class="text-lg text-black dark:text-white font-mono">Or, connect manually:</p>
      <input type="email" placeholder="Your Email" class="mt-4 w-full md:w-3/4 p-4 border-4 border-black bg-neutral-200 text-black placeholder-neutral-700 focus:outline-none focus:ring-4 focus:ring-red-500 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-400 dark:border-white dark:focus:ring-orange-400">
      <input type="password" placeholder="Your Password" class="mt-4 w-full md:w-3/4 p-4 border-4 border-black bg-neutral-200 text-black placeholder-neutral-700 focus:outline-none focus:ring-4 focus:ring-red-500 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-400 dark:border-white dark:focus:ring-orange-400">
      <button class="mt-6 w-full md:w-3/4 px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-red-500 text-white shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-orange-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        Log In
      </button>
    </div>

    <div class="mt-10 text-center">
      <p class="text-sm text-black dark:text-white font-mono">
        By connecting, you agree to our <a href="#" class="underline text-blue-700 dark:text-orange-400 hover:text-blue-900 dark:hover:text-orange-600">Terrible Terms</a> and <a href="#" class="underline text-blue-700 dark:text-orange-400 hover:text-blue-900 dark:hover:text-orange-600">Questionable Privacy Policy</a>.
      </p>
    </div>
  </div>
</div>