Recipe: Password input + strength meter

A self-contained password field with a real-time strength indicator. No libraries, no state management — just native HTML, Tailwind, and a few lines of inline logic.

Password

Strength: Weak

How it works

oninput fires on every keystroke — no debounce needed for a strength meter.
Score the password against four rules: length ≥ 8, contains uppercase, contains digit, contains special character.
Map the score to a label and fill the progress bar segments with #F472B6.
The entire component is a single controlled input — copy, paste, and drop it anywhere.

Copy-paste snippet

<input
  type="password"
  oninput="(function(e){
    const v=e.target.value;
    let s=0;
    if(v.length>=8)s++;
    if(/[A-Z]/.test(v))s++;
    if(/[0-9]/.test(v))s++;
    if(/[^A-Za-z0-9]/.test(v))s++;
    const bar=e.target.parentNode.querySelector('.bar');
    bar.style.width=(s*25)+'%';
    bar.style.background=s<2?'#F472B6':s<4?'#8B5CF6':'#22c55e';
  })(event)"
/>