Komponente des Registrierungsformulars

<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in border border-gray-200 dark:border-gray-700 relative">
    <!-- Neon Box Shadow Effect -->
    <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 rounded-lg blur opacity-75 animate-pulse dark:from-blue-600 dark:via-purple-700 dark:to-pink-700 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
    <div class="relative p-8 space-y-6 bg-white dark:bg-gray-800 rounded-lg">

      <h2 class="text-3xl font-extrabold text-center text-gray-900 dark:text-white mb-6 tracking-tight animate-fade-down">
        Register for <span class="text-blue-500 dark:text-blue-400">Inspiration</span>
      </h2>

      <form class="space-y-5">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Full Name
          </label>
          <input type="text" id="full-name" name="full-name" placeholder="John Doe" autocomplete="name" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Full Name">
        </div>

        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Email Address
          </label>
          <input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Email Address">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Password
          </label>
          <input type="password" id="password" name="password" placeholder="••••••••" autocomplete="new-password" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Password">
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Confirm Password
          </label>
          <input type="password" id="confirm-password" name="confirm-password" placeholder="••••••••" autocomplete="new-password" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Confirm Password">
        </div>

        <button type="submit"
          class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white
            bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-600 dark:to-purple-600
            hover:from-blue-600 hover:to-purple-600 dark:hover:from-blue-700 dark:hover:to-purple-700
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400
            transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
            relative overflow-hidden group"
          aria-label="Register Account">
            Register
            <!-- Small glow effect on button hover -->
            <span class="absolute inset-0 w-full h-full transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 ease-out bg-gradient-to-r from-blue-300 to-purple-300 dark:from-blue-500 dark:to-purple-500 opacity-20"></span>
        </button>
      </form>

      <p class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
        Already have an account?
        <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200"
          aria-label="Login Link">
          Sign in
        </a>
      </p>
    </div>
  </div>
</div>

<!-- To demonstrate the glow/pulse effect better, ensure these keyframe animations are present in your CSS setup (e.g., in a global CSS file or via Tailwind's JIT mode if configured) -->
<style>
  @keyframes pulse { 
    0%, 100% { 
      opacity: 0.75;
    }
    50% {
      opacity: 1;
      transform: scale(1.02);
    }
  }
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-down {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
  }
  .animate-fade-down {
    animation: fade-down 0.5s ease-out forwards;
  }
</style>