Formulaire de connexion/inscription Cyberpunk

<div class="min-h-screen bg-gray-950 text-gray-200 flex items-center justify-center p-4 sm:p-6 lg:p-8 dark:bg-gray-950 font-mono">
  <div class="relative w-full max-w-md mx-auto rounded-xl overflow-hidden shadow-2xl transition-all duration-300 transform hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-600 via-pink-600 to-red-600 opacity-20 animate-pulse-slow dark:opacity-30"></div>
    <div class="absolute inset-0 border-2 rounded-xl border-transparent glow-border dark:border-transparent"></div>
    
    <div class="relative p-8 backdrop-blur-sm bg-gray-900/80 dark:bg-gray-950/80 rounded-xl">
      <h2 class="text-4xl font-bold mb-6 text-center tracking-wider neon-glow-text dark:neon-glow-text-darker transition-colors duration-300">
        <span id="form-title">ACCESS_NEURAL_NET</span>
      </h2>

      <div class="flex justify-center mb-6">
        <button id="login-tab" class="px-6 py-2 mx-2 text-lg font-semibold rounded-full focus:outline-none transition-all duration-300 transform tab-button active-tab-button">
          LOGIN
        </button>
        <button id="signup-tab" class="px-6 py-2 mx-2 text-lg font-semibold rounded-full focus:outline-none transition-all duration-300 transform tab-button">
          REGISTER
        </button>
      </div>

      <form id="login-form" class="space-y-6">
        <div>
          <label for="login-email" class="block text-sm font-medium mb-2 text-purple-300 dark:text-purple-400">// DATA STREAM: EMAIL</label>
          <input type="email" id="login-email" class="w-full p-3 rounded-md bg-gray-800 border border-purple-700 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 text-purple-200 placeholder-purple-400 transition-all duration-300 dark:bg-gray-850 dark:border-purple-600 dark:focus:border-pink-400" placeholder="[email protected]">
        </div>
        <div>
          <label for="login-password" class="block text-sm font-medium mb-2 text-purple-300 dark:text-purple-400">// ENCRYPTED KEY: PASSWORD</label>
          <input type="password" id="login-password" class="w-full p-3 rounded-md bg-gray-800 border border-purple-700 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 text-purple-200 placeholder-purple-400 transition-all duration-300 dark:bg-gray-850 dark:border-purple-600 dark:focus:border-pink-400" placeholder="••••••••">
        </div>
        <button type="submit" class="w-full p-3 rounded-md font-bold text-lg text-white glowing-button transform hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-red-500 dark:focus:ring-red-400">
          INITIATE_CONNECTION
        </button>
        <p class="text-center text-sm text-gray-400 mt-4">
          <a href="#" class="text-purple-400 hover:underline transition-colors duration-300 neon-text-hover">FORGOT_ACCESS_CODE?</a>
        </p>
      </form>

      <form id="signup-form" class="space-y-6 hidden">
        <div>
          <label for="signup-username" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// USER_ALIAS</label>
          <input type="text" id="signup-username" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="cyber_nomad_77">
        </div>
        <div>
          <label for="signup-email" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// DATA STREAM: EMAIL</label>
          <input type="email" id="signup-email" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="[email protected]">
        </div>
        <div>
          <label for="signup-password" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// ENCRYPTED KEY: PASSWORD</label>
          <input type="password" id="signup-password" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="••••••••">
        </div>
        <div>
          <label for="signup-confirm-password" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// CONFIRM_ENCRYPTED_KEY</label>
          <input type="password" id="signup-confirm-password" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="••••••••">
        </div>
        <button type="submit" class="w-full p-3 rounded-md font-bold text-lg text-white glowing-button transform hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-green-500 dark:focus:ring-green-400">
          ESTABLISH_NEW_PROTOCOL
        </button>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-gray-500 mb-4">// ALTERNATIVE_AUTHENTICATION_METHODS</p>
        <div class="flex justify-center space-x-4">
          <button class="p-3 rounded-full bg-gray-800 border border-blue-700 hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-blue-500 transition-all duration-300 transform hover:scale-110 active:scale-90">
            <svg class="w-6 h-6 text-blue-400 dark:text-blue-300" 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 18H9.75v-6.75H7.5V9h2.25V7.5c0-2.25 1.5-3.75 4.125-3.75h3v2.25h-2.25c-.75 0-1.5.75-1.5 1.5V9h3.75l-.75 3h-3V18z" />
            </svg>
          </button>
          <button class="p-3 rounded-full bg-gray-800 border border-red-700 hover:border-red-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-red-500 transition-all duration-300 transform hover:scale-110 active:scale-90">
            <svg class="w-6 h-6 text-red-400 dark:text-red-300" 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 0zm.012 21.036c-5.07-1.127-8.913-5.748-8.913-11.036V12.01c0-5.06 3.967-9.28 9.02-9.28 4.975 0 8.98 4.093 8.98 9.17 0 4.8-3.743 8.877-8.966 9.136-.02-.007-.04-.017-.063-.02l-.004-.002zm-5.086-13.064h9.946v1.921H6.92V7.972zm0 2.472h9.946V12.36H6.92v-1.916zm0 2.443h7.172v1.924H6.92v-1.924z"/>
            </svg>
          </button>
          <button class="p-3 rounded-full bg-gray-800 border border-green-700 hover:border-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-green-500 transition-all duration-300 transform hover:scale-110 active:scale-90">
            <svg class="w-6 h-6 text-green-400 dark:text-green-300" 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 0zm1.75 18h-3.5A.75.75 0 019.5 17.25v-3.5H6.25a.75.75 0 01-.75-.75V9.5a.75.75 0 01.75-.75h3.5V5.25A.75.75 0 0110.25 4.5h3.5a.75.75 0 01.75.75v3.5h3.25a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.25v3.5a.75.75 0 01-.75.75z"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Base cyberpunk styling for neon effects */
  .neon-glow-text {
    text-shadow: 0 0 5px #e11d48, 0 0 10px #e11d48, 0 0 20px #e11d48, 0 0 40px #a21238, 0 0 80px #a21238;
    color: #f7d7df; /* A light pink for text color */
  }

  .dark .neon-glow-text-darker {
    text-shadow: 0 0 5px #f43f5e, 0 0 10px #f43f5e, 0 0 20px #f43f5e, 0 0 40px #fda4af, 0 0 80px #fda4af;
    color: #fce7f3; /* A lighter pink in dark mode */
  }

  .neon-text-hover:hover {
    text-shadow: 0 0 3px #a78bfa, 0 0 6px #a78bfa, 0 0 10px #a78bfa;
    color: #c4b5fd; /* Light purple on hover */
  }

  /* Animated glowing border */
  .glow-border {
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444);
    animation: glow-border-animation 6s infinite alternate;
  }

  @keyframes glow-border-animation {
    0% { border-image-source: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444); }
    25% { border-image-source: linear-gradient(to right, #ec4899, #ef4444, #8b5cf6); }
    50% { border-image-source: linear-gradient(to right, #ef4444, #8b5cf6, #ec4899); }
    75% { border-image-source: linear-gradient(to right, #8b5cf6, #ef4444, #ec4899); }
    100% { border-image-source: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444); }
  }

  /* Pulse glow for background */
  @keyframes pulse-slow {
    0% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.02); }
    100% { opacity: 0.2; transform: scale(1); }
  }

  .animate-pulse-slow {
    animation: pulse-slow 10s infinite ease-in-out;
  }

  /* Button gradient and glow */
  .glowing-button {
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    box-shadow: 0 0 10px #ec4899, 0 0 20px #8b5cf6;
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }

  .glowing-button:hover {
    background: linear-gradient(90deg, #8b5cf6, #ec4899);
    box-shadow: 0 0 15px #8b5cf6, 0 0 30px #ec4899;
  }

  /* Tab Button Styling */
  .tab-button {
    background: transparent;
    border: 2px solid transparent;
    color: #a78bfa; /* Default tab text color */
    position: relative;
    overflow: hidden;
  }

  .tab-button::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(to right, #a78bfa, #f472b6, #ef4444);
    transition: all 0.3s ease-out;
    transform: translateX(-50%);
  }

  .tab-button.active-tab-button {
    color: #fff; /* Active tab text color */
    text-shadow: 0 0 5px #a78bfa, 0 0 10px #a78bfa;
  }

  .tab-button.active-tab-button::before {
    width: 100%;
  }

  .tab-button:not(.active-tab-button):hover::before {
     width: 50%; /* Smaller underline on hover for inactive */
  }

  .tab-button:not(.active-tab-button):hover {
    color: #d1d5db; /* Lighter text on hover for inactive */
  }

  /* Dark mode specific adjustments for general elements */
  @media (prefers-color-scheme: dark) {
    .dark\:bg-gray-950 {
      background-color: #030712 !important;
    }
    .dark\:bg-gray-950\/80 {
      background-color: rgba(3, 7, 18, 0.8) !important;
    }
    .dark\:bg-gray-850 {
      background-color: #1f2937 !important;
    }
  }
</style>

<script>
  // This script is for demonstration and functional purposes of the component.
  // In a real application, you would integrate with a framework or backend.
  document.addEventListener('DOMContentLoaded', () => {
    const loginTab = document.getElementById('login-tab');
    const signupTab = document.getElementById('signup-tab');
    const loginForm = document.getElementById('login-form');
    const signupForm = document.getElementById('signup-form');
    const formTitle = document.getElementById('form-title');

    loginTab.addEventListener('click', () => {
      loginTab.classList.add('active-tab-button');
      signupTab.classList.remove('active-tab-button');
      loginForm.classList.remove('hidden');
      signupForm.classList.add('hidden');
      formTitle.textContent = 'ACCESS_NEURAL_NET';
    });

    signupTab.addEventListener('click', () => {
      signupTab.classList.add('active-tab-button');
      loginTab.classList.remove('active-tab-button');
      signupForm.classList.remove('hidden');
      loginForm.classList.add('hidden');
      formTitle.textContent = 'INITIATE_PROTOCOL';
    });
  });
</script>