Komponente des Registrierungsformulars

<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 font-sans">
  <div class="w-full max-w-lg bg-gray-100 dark:bg-gray-700 rounded-3xl shadow-xl p-8 transform transition-all duration-300 ease-in-out
              dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.6),_inset_0_-2px_4px_rgba(255,255,255,0.05),_0_8px_16px_rgba(0,0,0,0.5)]
              shadow-[inset_0_2px_4px_rgba(255,255,255,0.8),_inset_0_-2px_4px_rgba(0,0,0,0.1),_0_8px_16px_rgba(0,0,0,0.2)]">
    <h2 class="text-3xl font-extrabold text-gray-700 dark:text-gray-200 mb-8 text-center drop-shadow-sm">
      <span class="block">Embark on Your Journey</span>
      <span class="block text-sm font-normal text-gray-500 dark:text-gray-400 mt-2">Register for an unforgettable experience</span>
    </h2>

    <form class="space-y-6">
      <div>
        <label for="full-name" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Full Name</label>
        <input type="text" id="full-name" name="full-name" placeholder="John Doe" autocomplete="name"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Full Name">
      </div>

      <div>
        <label for="email" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Email Address</label>
        <input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Email Address">
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Password</label>
        <input type="password" id="password" name="password" placeholder="••••••••"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Password">
      </div>

      <div>
        <label for="confirm-password" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Confirm Password</label>
        <input type="password" id="confirm-password" name="confirm-password" placeholder="••••••••"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Confirm Password">
      </div>

      <div class="relative flex items-start">
        <div class="flex items-center h-5">
          <input id="terms" name="terms" type="checkbox"
                 class="focus:ring-blue-500 h-5 w-5 text-blue-600 rounded drop-shadow-sm
                        bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-600
                        shadow-[inset_0_1px_2px_rgba(0,0,0,0.1),_inset_0_-1px_2px_rgba(255,255,255,0.6)]
                        dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.7),_inset_0_-1px_2px_rgba(255,255,255,0.05)]
                        appearance-none checked:bg-blue-500 checked:border-transparent cursor-pointer
                        transition-all duration-200 ease-in-out">
          <div class="absolute w-5 h-5 flex items-center justify-center pointer-events-none">
            <svg class="h-4 w-4 text-white opacity-0 transform scale-0 transition-all duration-200 ease-in-out pointer-events-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
          </div>
        </div>
        <div class="ml-3 text-sm">
          <label for="terms" class="font-medium text-gray-700 dark:text-gray-300 drop-shadow-sm">
            I agree to the <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-md transition duration-200">Terms and Conditions</a>
          </label>
        </div>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-6 border border-transparent rounded-2xl text-lg font-bold text-white
                       bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700
                       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400
                       shadow-xl
                       shadow-[0_4px_8px_rgba(0,0,0,0.2),_inset_0px_2px_4px_rgba(255,255,255,0.4),_inset_0px_-2px_4px_rgba(0,0,0,0.2)]
                       dark:shadow-[0_4px_8px_rgba(0,0,0,0.6),_inset_0px_2px_4px_rgba(255,255,255,0.1),_inset_0px_-2px_4px_rgba(0,0,0,0.4)]
                       active:shadow-inner active:bg-blue-700 dark:active:bg-blue-800
                       transform active:scale-98 transition-all duration-200 ease-in-out drop-shadow-sm">
          Register Now
        </button>
      </div>
    </form>
  </div>
</div>

<style>
  /* Custom style for the checkbox checkmark animation */
  input[type='checkbox']:checked + div > svg {
    opacity: 1;
    transform: scale(1);
  }
</style>