Composant Formulaires

<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-blue-900 dark:to-purple-900 transition-all duration-500 ease-in-out">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-700 ease-in-out hover:scale-[1.01] hover:shadow-3xl border-2 border-transparent dark:border-gray-700
              bg-gradient-to-br from-white via-white to-white
              dark:from-gray-800 dark:via-gray-800 dark:to-gray-800
              sm:hover:border-purple-300 sm:dark:hover:border-blue-500">

    <div class="relative p-8 md:p-12 text-center text-white
                bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500
                dark:from-gray-700 dark:via-gray-800 dark:to-gray-900
                transition-all duration-700 ease-in-out">
      <div class="absolute inset-0 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 opacity-20 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 transition-opacity duration-700 ease-in-out"></div>
      <h2 class="relative text-3xl md:text-4xl font-extrabold mb-2 leading-tight tracking-tight drop-shadow-lg">Sign Up for Our Service</h2>
      <p class="relative text-lg md:text-xl font-medium opacity-90">Unlock a world of possibilities.</p>
      <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-24 h-2 rounded-full
                  bg-gradient-to-r from-yellow-300 via-green-400 to-blue-500
                  dark:from-cyan-400 dark:via-sky-500 dark:to-indigo-600 transition-all duration-700 ease-in-out"></div>
    </div>

    <form class="p-6 md:p-10 space-y-6 md:space-y-8">
      <!-- Full Name Field -->
      <div>
        <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Full Name</label>
        <input type="text" id="full-name" name="full-name" placeholder="John Doe"
               class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 dark:border-gray-600
                      focus:outline-none focus:ring-4 focus:ring-opacity-50
                      focus:border-purple-500 focus:ring-purple-200
                      dark:bg-gray-700 dark:text-gray-200 dark:focus:border-blue-500 dark:focus:ring-blue-800
                      transition-all duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
      </div>

      <!-- Email Field -->
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Email Address</label>
        <input type="email" id="email" name="email" placeholder="[email protected]"
               class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 dark:border-gray-600
                      focus:outline-none focus:ring-4 focus:ring-opacity-50
                      focus:border-pink-500 focus:ring-pink-200
                      dark:bg-gray-700 dark:text-gray-200 dark:focus:border-cyan-500 dark:focus:ring-cyan-800
                      transition-all duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
      </div>

      <!-- Password Field -->
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Password</label>
        <input type="password" id="password" name="password" placeholder="Minimum 8 characters"
               class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 dark:border-gray-600
                      focus:outline-none focus:ring-4 focus:ring-opacity-50
                      focus:border-yellow-500 focus:ring-yellow-200
                      dark:bg-gray-700 dark:text-gray-200 dark:focus:border-green-500 dark:focus:ring-green-800
                      transition-all duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
      </div>

      <!-- Service Tier Selection (Radio Buttons) -->
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 transition-colors duration-300">Choose Your Tier</label>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <label class="flex items-center p-4 rounded-lg border-2 border-gray-300 dark:border-gray-600
                        cursor-pointer hover:border-blue-500 dark:hover:border-purple-500
                        transition-all duration-300 ease-in-out
                        has-[:checked]:bg-blue-50 has-[:checked]:border-blue-500 has-[:checked]:ring-1 has-[:checked]:ring-blue-500
                        dark:has-[:checked]:bg-gray-700 dark:has-[:checked]:border-purple-500 dark:has-[:checked]:ring-1 dark:has-[:checked]:ring-purple-500">
            <input type="radio" name="service-tier" value="basic" class="h-5 w-5 text-blue-600 dark:text-purple-600 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-purple-500 transition-colors duration-300">
            <div class="ml-3">
              <span class="block text-sm font-medium text-gray-800 dark:text-gray-200">Basic</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">Essential features for new users.</span>
            </div>
          </label>
          <label class="flex items-center p-4 rounded-lg border-2 border-gray-300 dark:border-gray-600
                        cursor-pointer hover:border-teal-500 dark:hover:border-pink-500
                        transition-all duration-300 ease-in-out
                        has-[:checked]:bg-teal-50 has-[:checked]:border-teal-500 has-[:checked]:ring-1 has-[:checked]:ring-teal-500
                        dark:has-[:checked]:bg-gray-700 dark:has-[:checked]:border-pink-500 dark:has-[:checked]:ring-1 dark:has-[:checked]:ring-pink-500">
            <input type="radio" name="service-tier" value="premium" class="h-5 w-5 text-teal-600 dark:text-pink-600 border-gray-300 dark:border-gray-600 focus:ring-teal-500 dark:focus:ring-pink-500 transition-colors duration-300">
            <div class="ml-3">
              <span class="block text-sm font-medium text-gray-800 dark:text-gray-200">Premium</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">Advanced tools for growing teams.</span>
            </div>
          </label>
        </div>
      </div>

      <!-- Terms and Conditions Checkbox -->
      <div class="flex items-center">
        <input id="terms" name="terms" type="checkbox"
               class="h-5 w-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500
                      dark:border-gray-600 dark:bg-gray-700 dark:text-indigo-600 dark:focus:ring-indigo-500
                      transition-colors duration-300">
        <label for="terms" class="ml-3 block text-sm text-gray-900 dark:text-gray-300 transition-colors duration-300">
          I agree to the
          <a href="#" class="font-medium text-purple-600 hover:text-purple-700 dark:text-indigo-500 dark:hover:text-indigo-600 transition-colors duration-300">Terms of Service</a>
          and
          <a href="#" class="font-medium text-purple-600 hover:text-purple-700 dark:text-indigo-500 dark:hover:text-indigo-600 transition-colors duration-300">Privacy Policy</a>.
        </label>
      </div>

      <!-- Submit Button -->
      <button type="submit"
              class="w-full flex justify-center py-3 px-6 rounded-lg
                     text-white font-semibold text-lg
                     bg-gradient-to-r from-green-500 via-blue-500 to-indigo-600
                     hover:from-green-600 hover:via-blue-600 hover:to-indigo-700
                     dark:from-cyan-600 dark:via-blue-600 dark:to-purple-700
                     dark:hover:from-cyan-700 dark:hover:via-blue-700 dark:hover:to-purple-800
                     focus:outline-none focus:ring-4 focus:ring-offset-2
                     focus:ring-green-300 dark:focus:ring-cyan-500
                     transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 shadow-lg drop-shadow-md">
        Create Account
      </button>

      <!-- Login Link -->
      <p class="mt-6 text-center text-gray-600 dark:text-gray-400 transition-colors duration-300">
        Already have an account?
        <a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-sky-500 dark:hover:text-sky-600 transition-colors duration-300">Sign In</a>
      </p>
    </form>
  </div>
</div>