Confirm Password Match

<div class="nuda-fs2-confirm-match">
  <div class="nuda-fs2-confirm-match__row">
    <label for="fs2-cm-pass">Password</label>
    <input id="fs2-cm-pass" type="password" value="lime-forest-42">
  </div>
  <div class="nuda-fs2-confirm-match__row is-match">
    <label for="fs2-cm-confirm">Confirm password</label>
    <div class="nuda-fs2-confirm-match__field">
      <input id="fs2-cm-confirm" type="password" value="lime-forest-42" aria-describedby="fs2-cm-hint">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
           stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M5 12 L10 17 L20 7" />
      </svg>
    </div>
    <span id="fs2-cm-hint" class="nuda-fs2-confirm-match__hint" role="status" aria-live="polite">
      Passwords match.
    </span>
  </div>
</div>
<!-- JS: compare the confirm field to the password field on input, toggling
     .is-match / .is-mismatch on the confirm row and updating the hint text. -->

/* Confirm Password Match — live equality check between the two fields. */
(function () {
  var wrap = document.querySelector('.nuda-fs2-confirm-match');
  if (!wrap) return;
  var pass = wrap.querySelector('#fs2-cm-pass');
  var confirm = wrap.querySelector('#fs2-cm-confirm');
  var row = confirm.closest('.nuda-fs2-confirm-match__row');
  var hint = wrap.querySelector('.nuda-fs2-confirm-match__hint');

  function check() {
    if (!confirm.value) {
      row.classList.remove('is-match', 'is-mismatch');
      hint.textContent = '';
      return;
    }
    var match = confirm.value === pass.value;
    row.classList.toggle('is-match', match);
    row.classList.toggle('is-mismatch', !match);
    hint.textContent = match ? 'Passwords match.' : 'Passwords do not match.';
  }

  pass.addEventListener('input', check);
  confirm.addEventListener('input', check);
})();

.nuda-fs2-confirm-match {
  width: 100%;
  max-width: 270px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: ui-sans-serif,system-ui,sans-serif;
}

.nuda-fs2-confirm-match__row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nuda-fs2-confirm-match__row label {
  font-size: 12px;
  font-weight: 600;
  color: #cfcfcf;
}

.nuda-fs2-confirm-match__row input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  color: #fafafa;
  font-size: 13px;
  box-sizing: border-box;
  transition: border-color .2s;
}

.nuda-fs2-confirm-match__row input:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

.nuda-fs2-confirm-match__field {
  position: relative;
}

.nuda-fs2-confirm-match__field svg {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%) scale(0);
  opacity: 0;
  color: #7be08a;
  transition: transform .2s,opacity .2s;
}

.nuda-fs2-confirm-match__row.is-match .nuda-fs2-confirm-match__field input {
  border-color: #7be08a;
  padding-right: 36px;
}

.nuda-fs2-confirm-match__row.is-match .nuda-fs2-confirm-match__field svg {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}

.nuda-fs2-confirm-match__row.is-mismatch .nuda-fs2-confirm-match__field input {
  border-color: #ff8080;
}

.nuda-fs2-confirm-match__hint {
  font-size: 11px;
  color: #7be08a;
}

.nuda-fs2-confirm-match__row.is-mismatch .nuda-fs2-confirm-match__hint {
  color: #ff9d9d;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-fs2-confirm-match__field svg {
    transition: opacity .12s linear;
  }
}