브루탈리스트 로그인 양식

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