Basic Change Password

<form class="w-full max-w-sm space-y-4" novalidate>
  <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">Change password</h2>

  <div>
    <label for="cp-current" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Current password</label>
    <input id="cp-current" name="currentPassword" type="password" autocomplete="current-password"
      class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
  </div>

  <div>
    <label for="cp-new" class="block text-sm font-medium text-gray-700 dark:text-gray-300">New password</label>
    <input id="cp-new" name="newPassword" type="password" autocomplete="new-password"
      class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
  </div>

  <div>
    <label for="cp-confirm" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm new password</label>
    <!-- aria-invalid + a described error is the only cue a screen reader gets that the two fields disagree. -->
    <input id="cp-confirm" name="confirmPassword" type="password" autocomplete="new-password" aria-invalid="true" aria-describedby="cp-confirm-error"
      class="mt-1.5 block w-full rounded-lg border border-red-400 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 dark:border-red-500 dark:bg-gray-900 dark:text-gray-100" />
    <p id="cp-confirm-error" role="alert" class="mt-1.5 text-xs font-medium text-red-600 dark:text-red-400">Passwords do not match.</p>
  </div>

  <div class="flex items-center gap-2">
    <input id="cp-show" type="checkbox"
      class="h-4 w-4 rounded border-gray-300 text-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-600 dark:bg-gray-900" />
    <label for="cp-show" class="text-sm text-gray-600 dark:text-gray-400">Show passwords</label>
  </div>

  <button type="submit"
    class="inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:opacity-50 motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
    Update password
  </button>
</form>