Change Password With Strength Meter

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

  <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" aria-describedby="cp-strength"
      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" />
    <!-- The meter is decorative; the aria-live line beneath it is what a screen reader hears. -->
    <div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700" aria-hidden="true">
      <div class="h-full w-3/4 rounded-full bg-blue-500 transition-all motion-reduce:transition-none"></div>
    </div>
    <p id="cp-strength" aria-live="polite" class="mt-1.5 text-xs text-gray-600 dark:text-gray-400">
      Password strength: <span class="font-medium text-gray-900 dark:text-gray-100">Good</span>
    </p>
  </div>

  <div>
    <label for="cp-confirm" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm new password</label>
    <input id="cp-confirm" name="confirmPassword" 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>

  <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 motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
    Update password
  </button>
</form>