Connexion / inscription au tableau de bord rétro

<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-amber-200 via-red-400 to-rose-600 dark:from-gray-800 dark:via-gray-900 dark:to-black p-6">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg w-full max-w-md filter drop-shadow-lg transform rotate-2 transition duration-500 hover:rotate-0">
    <div class="mb-8 text-center">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-white font-mono">Dashboard Access</h2>
      <p class="text-gray-600 dark:text-gray-300 mt-2">Enter your credentials to dive in!</p>
    </div>

    <div class="tabs">
      <input type="radio" name="tabs" id="login" checked class="hidden">
      <label for="login" class="tab-label inline-block px-4 py-2 text-gray-700 dark:text-gray-200 font-semibold border-b-2 border-transparent hover:border-rose-500 cursor-pointer transition duration-300">Login</label>

      <input type="radio" name="tabs" id="signup" class="hidden">
      <label for="signup" class="tab-label inline-block px-4 py-2 text-gray-700 dark:text-gray-200 font-semibold border-b-2 border-transparent hover:border-rose-500 cursor-pointer transition duration-300">Sign Up</label>

      <div id="tab-content-login" class="mt-8 tab-content">
        <form>
          <div class="mb-5">
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address</label>
            <input type="email" id="email" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="[email protected]">
          </div>
          <div class="mb-5">
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Password</label>
            <input type="password" id="password" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="********">
          </div>
          <div class="flex items-center justify-between mb-6">
            <div class="flex items-center">
              <input type="checkbox" id="remember" class="form-checkbox h-4 w-4 text-rose-600 dark:text-rose-400 rounded">
              <label for="remember" class="ml-2 block text-sm text-gray-800 dark:text-gray-200">Remember me</label>
            </div>
            <a href="#" class="text-sm text-rose-600 dark:text-rose-400 hover:underline">Forgot Password?</a>
          </div>
          <button type="submit" class="w-full bg-rose-500 hover:bg-rose-600 text-white font-bold py-2 px-4 rounded-md transition duration-300">Login</button>
        </form>
      </div>

      <div id="tab-content-signup" class="mt-8 tab-content hidden">
        <form>
           <div class="mb-5">
            <label for="new-email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address</label>
            <input type="email" id="new-email" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="[email protected]">
          </div>
           <div class="mb-5">
            <label for="new-password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Password</label>
            <input type="password" id="new-password" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="********">
          </div>
           <div class="mb-5">
            <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Confirm Password</label>
            <input type="password" id="confirm-password" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="********">
          </div>
          <button type="submit" class="w-full bg-amber-400 hover:bg-amber-500 text-white font-bold py-2 px-4 rounded-md transition duration-300">Sign Up</button>
        </form>
      </div>
    </div>
  </div>
</div>

<style>
  /* Basic tab functionality (can be improved with JS) */
  .tabs input:checked + .tab-label {
    border-color: #f43f5e; /* rose-500 */
  }

  .tabs input:checked ~ .tab-content {
    display: block;
  }

  /* Hide inactive tab content */
  .tab-content {
    display: none;
  }
</style>