パスワードリセットコンポーネント

<div class="min-h-screen flex items-center justify-center p-4 bg-blue-50 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 space-y-6 border border-blue-100 dark:border-gray-700 transition-all duration-300 transform md:scale-105 lg:scale-100 xl:scale-95">
    <div class="text-center">
      <h1 class="text-3xl font-extrabold text-blue-800 dark:text-blue-300 mb-2">Reset Your Password</h1>
      <p class="text-gray-600 dark:text-gray-400 text-sm">Enter your new password below.</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="new-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">New Password</label>
        <input type="password" id="new-password" name="new-password" required class="w-full px-4 py-2 border border-blue-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-blue-50 dark:bg-gray-700 transition-colors duration-200" placeholder="••••••••">
      </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" required class="w-full px-4 py-2 border border-blue-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-blue-50 dark:bg-gray-700 transition-colors duration-200" placeholder="••••••••">
      </div>

      <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 transition-colors duration-200">
        Reset Password
      </button>
    </form>

    <div class="text-center text-sm">
      <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">Back to sign in</a>
    </div>
  </div>
</div>