Komponente zum Zurücksetzen des Kennworts

<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 font-sans">
  <div class="relative w-full max-w-md mx-auto p-8 bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-500 scale-100 hover:scale-105 group border border-amber-200 dark:border-gray-700">
    <!-- Organic background shapes -->
    <div class="absolute -top-10 -left-10 w-48 h-48 bg-amber-200 dark:bg-amber-800 rounded-full mix-blend-multiply opacity-30 blur-xl group-hover:scale-125 transition-transform duration-700"></div>
    <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-orange-200 dark:bg-orange-800 rounded-full mix-blend-multiply opacity-30 blur-xl group-hover:scale-125 transition-transform duration-700"></div>
    <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-yellow-100 dark:bg-yellow-800 rounded-full mix-blend-overlay opacity-20 blur-xl group-hover:scale-125 transition-transform duration-700"></div>

    <div class="relative z-10 space-y-8">
      <div class="text-center">
        <h2 class="text-3xl font-extrabold text-amber-800 dark:text-amber-300 mb-2 leading-tight tracking-tight drop-shadow-sm">
          Reset Your Password
        </h2>
        <p class="text-orange-600 dark:text-orange-200 text-sm md:text-base leading-relaxed">
          Enter your new password below. Ensure it's strong and unique.
        </p>
      </div>

      <form class="space-y-6">
        <div>
          <label for="new-password" class="block text-sm font-medium text-orange-700 dark:text-orange-300 mb-1">
            New Password
          </label>
          <div class="relative">
            <input
              type="password"
              id="new-password"
              name="new-password"
              required
              class="w-full px-4 py-2 rounded-xl border border-amber-300 dark:border-gray-700 focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 focus:border-transparent outline-none transition-all duration-300 text-orange-800 dark:text-white bg-amber-50 dark:bg-gray-700 placeholder-orange-300 dark:placeholder-gray-400 shadow-sm"
              placeholder="••••••••"
            >
            <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-orange-400 dark:text-gray-400">
              <!-- Placeholder for an eye icon -->
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
              </svg>
            </span>
          </div>
          <p class="mt-2 text-xs text-orange-500 dark:text-orange-400">
            Minimum 8 characters, including a capital letter and a number.
          </p>
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-orange-700 dark:text-orange-300 mb-1">
            Confirm Password
          </label>
          <div class="relative">
            <input
              type="password"
              id="confirm-password"
              name="confirm-password"
              required
              class="w-full px-4 py-2 rounded-xl border border-amber-300 dark:border-gray-700 focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 focus:border-transparent outline-none transition-all duration-300 text-orange-800 dark:text-white bg-amber-50 dark:bg-gray-700 placeholder-orange-300 dark:placeholder-gray-400 shadow-sm"
              placeholder="••••••••"
            >
             <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-orange-400 dark:text-gray-400">
              <!-- Placeholder for an eye icon -->
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
              </svg>
            </span>
          </div>
        </div>

        <button
          type="submit"
          class="w-full px-6 py-3 rounded-full bg-gradient-to-r from-orange-500 to-amber-700 text-white font-semibold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-600 focus:ring-opacity-75 relative overflow-hidden group"
        >
          <span class="relative z-10">
            Reset Password
          </span>
          <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
        </button>
      </form>

      <div class="text-center text-sm">
        <p class="text-orange-600 dark:text-orange-200">
          Remember your password?
          <a href="#" class="font-medium text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition-colors duration-200">
            Log In
          </a>
        </p>
      </div>
    </div>
  </div>
</div>