Formulaire d’inscription Art Déco

<div class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-gray-900 dark:from-gray-950 dark:via-blue-900 dark:to-purple-950 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
  <div class="w-full max-w-lg bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 shadow-2xl rounded-lg overflow-hidden border-4 border-yellow-600 dark:border-yellow-400 transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
    <div class="p-6 sm:p-8 lg:p-10 bg-yellow-600 dark:bg-yellow-700 text-white text-center border-b-4 border-yellow-700 dark:border-yellow-800 relative select-none">
      <h2 class="text-3xl sm:text-4xl font-bold tracking-wider uppercase drop-shadow-lg leading-tight">
        <span class="block">Public Service</span>
        <span class="block text-xl sm:text-2xl mt-1">Registration</span>
      </h2>
      <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
        <div class="absolute w-24 h-24 sm:w-32 sm:h-32 bg-white dark:bg-gray-900 opacity-10 rounded-full animate-pulse"></div>
        <div class="absolute w-16 h-16 sm:w-24 sm:h-24 bg-white dark:bg-gray-900 opacity-5 rounded-full animate-pulse animation-delay-200"></div>
      </div>
    </div>

    <form class="p-6 sm:p-8 lg:p-10 grid grid-cols-1 gap-y-6 sm:gap-y-8 select-none">
      <div class="relative group">
        <label for="full-name" class="absolute -top-3 left-3 px-1 text-xs text-indigo-700 dark:text-blue-400 bg-gray-200 dark:bg-gray-800 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 transition-all group-focus-within:-top-3 group-focus-within:text-indigo-700 dark:group-focus-within:text-blue-400 group-focus-within:text-xs">
          Full Name
        </label>
        <input type="text" id="full-name" name="full_name" placeholder="John Doe" class="peer block w-full px-4 py-3 rounded-md border-2 border-indigo-400 dark:border-blue-700 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-transparent focus:outline-none focus:border-indigo-600 dark:focus:border-blue-500 transition-colors duration-200">
      </div>

      <div class="relative group">
        <label for="email" class="absolute -top-3 left-3 px-1 text-xs text-indigo-700 dark:text-blue-400 bg-gray-200 dark:bg-gray-800 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 transition-all group-focus-within:-top-3 group-focus-within:text-indigo-700 dark:group-focus-within:text-blue-400 group-focus-within:text-xs">
          Email Address
        </label>
        <input type="email" id="email" name="email" placeholder="[email protected]" class="peer block w-full px-4 py-3 rounded-md border-2 border-indigo-400 dark:border-blue-700 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-transparent focus:outline-none focus:border-indigo-600 dark:focus:border-blue-500 transition-colors duration-200">
      </div>

      <div class="relative group">
        <label for="password" class="absolute -top-3 left-3 px-1 text-xs text-indigo-700 dark:text-blue-400 bg-gray-200 dark:bg-gray-800 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 transition-all group-focus-within:-top-3 group-focus-within:text-indigo-700 dark:group-focus-within:text-blue-400 group-focus-within:text-xs">
          Create Password
        </label>
        <input type="password" id="password" name="password" placeholder="********" class="peer block w-full px-4 py-3 rounded-md border-2 border-indigo-400 dark:border-blue-700 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-transparent focus:outline-none focus:border-indigo-600 dark:focus:border-blue-500 transition-colors duration-200">
      </div>

      <div class="relative group">
        <label for="confirm-password" class="absolute -top-3 left-3 px-1 text-xs text-indigo-700 dark:text-blue-400 bg-gray-200 dark:bg-gray-800 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 transition-all group-focus-within:-top-3 group-focus-within:text-indigo-700 dark:group-focus-within:text-blue-400 group-focus-within:text-xs">
          Confirm Password
        </label>
        <input type="password" id="confirm-password" name="confirm_password" placeholder="********" class="peer block w-full px-4 py-3 rounded-md border-2 border-indigo-400 dark:border-blue-700 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-transparent focus:outline-none focus:border-indigo-600 dark:focus:border-blue-500 transition-colors duration-200">
      </div>

      <div class="relative group">
        <label for="dob" class="absolute -top-3 left-3 px-1 text-xs text-indigo-700 dark:text-blue-400 bg-gray-200 dark:bg-gray-800 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 transition-all group-focus-within:-top-3 group-focus-within:text-indigo-700 dark:group-focus-within:text-blue-400 group-focus-within:text-xs">
          Date of Birth
        </label>
        <input type="date" id="dob" name="dob" class="peer block w-full px-4 py-3 rounded-md border-2 border-indigo-400 dark:border-blue-700 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-transparent focus:outline-none focus:border-indigo-600 dark:focus:border-blue-500 transition-colors duration-200">
      </div>

      <div class="flex items-center space-x-3 mt-2">
        <input type="checkbox" id="terms" name="terms" class="h-5 w-5 text-yellow-600 dark:text-yellow-400 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-700 rounded focus:ring-yellow-500 dark:focus:ring-yellow-300">
        <label for="terms" class="text-sm text-gray-700 dark:text-gray-300">
          I agree to the <a href="#" class="text-indigo-600 dark:text-blue-400 hover:underline font-semibold">Terms of Service</a>
        </label>
      </div>

      <button type="submit" class="w-full px-6 py-3 mt-4 text-lg font-bold text-white bg-indigo-700 dark:bg-blue-600 rounded-md shadow-lg transform transition-all duration-300 ease-in-out hover:scale-105 hover:bg-indigo-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-blue-800 active:scale-95 border-b-4 border-indigo-900 dark:border-blue-800">
        Register Account
      </button>
    </form>

    <div class="p-6 sm:p-8 lg:p-10 text-center text-sm bg-gray-100 dark:bg-gray-900 border-t-4 border-gray-300 dark:border-gray-700">
      <p class="text-gray-600 dark:text-gray-400">
        Already have an account? <a href="#" class="text-indigo-600 dark:text-blue-400 hover:underline font-semibold">Sign In Here</a>
      </p>
    </div>
  </div>
</div>