Brutalista Social Login (Moda/Belleza)

<div class="min-h-screen bg-pink-300 dark:bg-zinc-900 flex items-center justify-center p-4 sm:p-8 font-mono">
  <div class="relative w-full max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl bg-orange-400 dark:bg-zinc-800 border-8 border-black dark:border-white shadow-[15px_15px_0_0_#000,20px_20px_0_0_#F00] dark:shadow-[15px_15px_0_0_#FFF,20px_20px_0_0_#FFF] transition-all duration-300 transform -rotate-1 skew-y-1 sm:skew-y-0">
    <div class="absolute -top-4 -left-4 w-12 h-12 bg-lime-400 dark:bg-purple-600 border-4 border-black dark:border-white"></div>
    <div class="absolute -bottom-4 -right-4 w-12 h-12 bg-cyan-400 dark:bg-yellow-500 border-4 border-black dark:border-white"></div>

    <div class="p-6 sm:p-8 lg:p-10 text-black dark:text-white relative z-10">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4 sm:mb-6 text-black dark:text-white uppercase tracking-widest leading-tight border-b-4 border-black dark:border-white pb-2">
        JOIN THE REVOLUTION
      </h2>
      <p class="text-sm sm:text-base mb-6 sm:mb-8 text-black dark:text-gray-300">
        Unlock exclusive looks and limited-edition drops. Step into a bolder reality.
      </p>

      <div class="grid grid-cols-1 gap-4">
        <button class="w-full flex items-center justify-center space-x-3 px-6 py-3 sm:py-4 bg-purple-600 dark:bg-indigo-600 text-white dark:text-white text-lg sm:text-xl font-bold uppercase border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#FFF] hover:shadow-[4px_4px_0_0_#000] dark:hover:shadow-[4px_4px_0_0_#FFF] transition-all duration-200 transform -skew-x-3 hover:translate-x-1 hover:translate-y-1">
          <svg class="w-7 h-7 sm:w-8 sm:h-8" 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.473 18.99v-6.27h2.1l.31-2.45h-2.41v-1.57c0-.7.19-1.18.96-1.18h1.26V7.4c-.22-.03-.97-.09-1.85-.09-1.84 0-3.1 1.13-3.1 3.2V12h-2.1v2.45h2.1v6.54h3.7z" />
          </svg>
          <span>LOG IN WITH FACEBOOK</span>
        </button>

        <button class="w-full flex items-center justify-center space-x-3 px-6 py-3 sm:py-4 bg-red-600 dark:bg-rose-700 text-white dark:text-white text-lg sm:text-xl font-bold uppercase border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#FFF] hover:shadow-[4px_4px_0_0_#000] dark:hover:shadow-[4px_4px_0_0_#FFF] transition-all duration-200 transform skew-x-3 hover:-translate-x-1 hover:translate-y-1">
          <svg class="w-7 h-7 sm:w-8 sm:h-8" 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 0zm5.82 12.3c0 .24-.02.48-.05.7-.35 2.14-1.97 3.65-4.54 3.65-2.98 0-5.4-2.42-5.4-5.4s2.42-5.4 5.4-5.4c1.62 0 2.94.7 3.86 1.62l-1.1 1.08c-.5-.39-1.2-.84-2.76-.84-1.92 0-3.32 1.62-3.32 3.74 0 2.12 1.4 3.74 3.32 3.74 1.28 0 2.05-.54 2.5-1.02a3.86 3.86 0 0 0 .5-.7c.08-.18.15-.36.2-.56h-2.75V12.3h4.94zm0 0" />
          </svg>
          <span>SIGN UP WITH GOOGLE</span>
        </button>

        <button class="w-full flex items-center justify-center space-x-3 px-6 py-3 sm:py-4 bg-blue-600 dark:bg-sky-700 text-white dark:text-white text-lg sm:text-xl font-bold uppercase border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#FFF] hover:shadow-[4px_4px_0_0_#000] dark:hover:shadow-[4px_4px_0_0_#FFF] transition-all duration-200 transform rotate-1 hover:-rotate-1">
          <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 .29c-6.63 0-12 5.37-12 12 0 5.3 3.43 9.8 8.2 11.3-.6-.1-1.3-.2-1.9-.2-2.1 0-3.9 1.1-4.7 2.7-.4.9-.7 2.1-.7 3.4 0 1.2.3 2.3.7 3.3.4.9 1.1 1.7 1.9 2.3 1.1.8 2.5 1.2 4.1 1.2s3-.4 4.1-1.2c.8-.6 1.5-1.4 1.9-2.3.4-1 .7-2.1.7-3.3 0-1.3-.3-2.5-.7-3.4-.8-1.6-2.6-2.7-4.7-2.7-.6 0-1.3.1-1.9.2 4.7-1.5 8.2-6 8.2-11.3 0-6.63-5.37-12-12-12zM9.54 19.34c-.2-.04-.4-.07-.6-.1-.5-.1-1.1-.1-1.7-.1-.9 0-1.8.2-2.7.5-.9.3-1.8.7-2.6 1.3-.4-.6-.7-1.3-.7-2.1 0-.9.2-1.8.7-2.6.4-.8 1.1-1.4 1.9-1.9.8-.5 1.6-.7 2.5-.7h.9c.7 0 1.3.1 1.9.3.6.2 1.1.4 1.6.7-.4.6-.7 1.3-.7 2.1 0 .9.2 1.8.7 2.6.4.8 1.1 1.4 1.9 1.9.8.5 1.6.7 2.5.7h.9c.7 0 1.3.1 1.9.3.6.2 1.1.4 1.6.7-.4.6-.7 1.3-.7 2.1 0 .9.2 1.8.7 2.6.4.8 1.1 1.4 1.9 1.9.8.5 1.6.7 2.5.7h.9c.7 0 1.3.1 1.9.3.6.2 1.1.4 1.6.7z" />
          </svg>
          <span>CONTINUE WITH X</span>
        </button>
      </div>

      <div class="my-8 sm:my-10 flex items-center">
        <div class="flex-grow border-t-4 border-black dark:border-white"></div>
        <span class="flex-shrink mx-4 text-lg sm:text-xl font-bold uppercase text-black dark:text-white bg-orange-400 dark:bg-zinc-800 px-4 py-2 border-4 border-black dark:border-white transform rotate-3">OR</span>
        <div class="flex-grow border-t-4 border-black dark:border-white"></div>
      </div>

      <form class="grid grid-cols-1 gap-5">
        <div>
          <label for="email" class="block text-sm sm:text-base font-bold uppercase mb-2 text-black dark:text-white">Email Address</label>
          <input type="email" id="email" placeholder="[email protected]" class="w-full px-5 py-3 sm:py-4 bg-yellow-200 dark:bg-zinc-700 text-black dark:text-white placeholder-black dark:placeholder-gray-400 border-4 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-lime-500 dark:focus:ring-purple-500 transform skew-y-2 hover:skew-y-0 transition-all duration-200" aria-label="Email Address">
        </div>
        <div>
          <label for="password" class="block text-sm sm:text-base font-bold uppercase mb-2 text-black dark:text-white">Password</label>
          <input type="password" id="password" placeholder="********" class="w-full px-5 py-3 sm:py-4 bg-yellow-200 dark:bg-zinc-700 text-black dark:text-white placeholder-black dark:placeholder-gray-400 border-4 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-lime-500 dark:focus:ring-purple-500 transform -skew-y-2 hover:skew-y-0 transition-all duration-200" aria-label="Password">
        </div>

        <button type="submit" class="w-full px-6 py-4 sm:py-5 bg-lime-500 dark:bg-purple-500 text-black dark:text-white text-xl sm:text-2xl font-extrabold uppercase mt-4 sm:mt-6 border-4 border-black dark:border-white shadow-[10px_10px_0_0_#000] dark:shadow-[10px_10px_0_0_#FFF] hover:shadow-[5px_5px_0_0_#000] dark:hover:shadow-[5px_5px_0_0_#FFF] transition-all duration-200 transform rotate-2 hover:-rotate-2">
          SECURE ACCESS
        </button>
      </form>

      <div class="text-center mt-8 sm:mt-10 text-sm sm:text-base text-black dark:text-gray-300">
        <p class="mb-2 sm:mb-3">
          Don't have an account? <a href="#" class="font-bold underline text-blue-700 dark:text-cyan-500 hover:text-blue-900 dark:hover:text-cyan-400 transform hover:scale-105 inline-block">REGISTER NOW</a>
        </p>
        <p>
          <a href="#" class="font-bold underline text-blue-700 dark:text-cyan-500 hover:text-blue-900 dark:hover:text-cyan-400 transform hover:scale-105 inline-block">FORGOT MY PASSWORD</a>
        </p>
      </div>

      <div class="mt-10 text-center text-xs text-black dark:text-gray-400 opacity-80">
        <p>&copy; 2024 FASHION/BEAUTY. ALL RIGHTS SERVED (NO, REALLY).</p>
      </div>
    </div>
  </div>
</div>