密码重置组件

<div class="min-h-screen bg-pink-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform perspective-1000 -rotate-x-1 sm:-rotate-x-2 -skew-y-0.5 sm:-skew-y-1 transition-all duration-300 ease-in-out
              border-4 border-dashed border-pink-300 dark:border-pink-600
              flex flex-col items-center p-8 sm:p-10 relative">
    
    <!-- Paper-like background texture (subtle) -->
    <div class="absolute inset-0 bg-repeat opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;utf8,<svg viewBox=\'0 0 10 10\' xmlns=\'http://www.w3.org/2000/svg\'><circle cx=\'1\' cy=\'1\' r=\'.5\' fill=\'%23ccc\'/><circle cx=\'6\' cy=\'6\' r=\'.5\' fill=\'%23ccc\'/></svg>'); background-size: 10px 10px;"></div>

    <!-- Page Curl Effect (top right) -->
    <div class="absolute top-0 right-0 w-24 h-24 rounded-bl-full bg-pink-200 dark:bg-pink-700 opacity-70" style="clip-path: polygon(0 0, 100% 0, 100% 100%); transform: translate(25%, -25%) rotate(45deg);")></div>
    
    <div class="relative z-10 w-full">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-pink-700 dark:text-pink-300 mb-4 text-center tracking-tight leading-tight" style="font-family: 'Georgia', serif;">
        Reset Password
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 mb-8 text-center leading-relaxed font-light">
        Enter your new password below. Make sure it's strong and unique.
      </p>

      <form class="space-y-6">
        <div>
          <label for="new-password" class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-1">
            New Password
          </label>
          <div class="relative">
            <input
              type="password"
              id="new-password"
              name="new-password"
              required
              class="appearance-none block w-full px-4 py-3 border border-pink-300 dark:border-pink-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500
                     focus:outline-none focus:ring-2 focus:ring-mint-500 focus:border-mint-500
                     bg-pink-50 dark:bg-gray-700 text-gray-900 dark:text-white sm:text-base"
              placeholder="••••••••"
            >
            <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 dark:text-gray-400">
              <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>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-1">
            Confirm Password
          </label>
          <div class="relative">
            <input
              type="password"
              id="confirm-password"
              name="confirm-password"
              required
              class="appearance-none block w-full px-4 py-3 border border-pink-300 dark:border-pink-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500
                     focus:outline-none focus:ring-2 focus:ring-mint-500 focus:border-mint-500
                     bg-pink-50 dark:bg-gray-700 text-gray-900 dark:text-white sm:text-base"
              placeholder="••••••••"
            >
            <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 dark:text-gray-400">
              <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>

        <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
                   bg-mint-500 hover:bg-mint-600 dark:bg-mint-600 dark:hover:bg-mint-700 text-white
                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mint-500 dark:focus:ring-offset-gray-800
                   transform hover:scale-105 transition-all duration-200 ease-in-out
                   tracking-wide"
          >
            Reset Password
          </button>
        </div>
      </form>

      <p class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
        <a href="#" class="font-medium text-pink-600 hover:text-pink-800 dark:text-pink-400 dark:hover:text-pink-200 transition-colors duration-200">
          Go back to login
        </a>
      </p>
    </div>
  </div>
</div>