로그인 양식 구성 요소

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