Reset With Strength Meter

<!--
  A new-password field with a live strength meter. The meter itself is decorative
  (aria-hidden); the strength is also stated in words in an aria-live region so a
  screen reader hears "Password strength: Strong", not four coloured bars.
  Interactivity is required, so the static markup shows the empty state only.
-->
<form class="mx-auto w-full max-w-sm rounded-2xl border border-gray-200 bg-white p-6 shadow-sm sm:p-8 dark:border-gray-800 dark:bg-gray-950" action="#" method="post">
  <h1 class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Choose a new password</h1>

  <div class="mt-6">
    <label for="rp-strength" class="block text-sm font-medium text-gray-700 dark:text-gray-300">New password</label>
    <input
      id="rp-strength"
      name="password"
      type="password"
      autocomplete="new-password"
      required
      minlength="8"
      aria-describedby="rp-strength-label"
      placeholder="At least 8 characters"
      class="mt-1.5 w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder:text-gray-500 focus-visible:border-transparent 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:placeholder:text-gray-400 dark:focus-visible:ring-blue-400"
    />
    <div class="mt-2 grid grid-cols-4 gap-1.5" aria-hidden="true">
      <span class="h-1.5 rounded-full bg-gray-200 dark:bg-gray-800"></span>
      <span class="h-1.5 rounded-full bg-gray-200 dark:bg-gray-800"></span>
      <span class="h-1.5 rounded-full bg-gray-200 dark:bg-gray-800"></span>
      <span class="h-1.5 rounded-full bg-gray-200 dark:bg-gray-800"></span>
    </div>
    <p id="rp-strength-label" class="mt-1.5 text-xs text-gray-500 dark:text-gray-400" aria-live="polite">Password strength: Enter a password</p>
  </div>

  <button type="submit" class="mt-6 w-full rounded-lg bg-blue-600 px-5 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">
    Save password
  </button>
</form>