Create a reset-password card with Tailwind CSS. Include a title, a line naming the account being reset, a new password field, a four-segment strength meter bar that starts empty, a small strength label, a confirm field, and a requirements checklist whose items each carry a data-rule attribute. Finish with a full-width dark submit button and a back-to-sign-in link. Then add JavaScript that scores the password on every keystroke — length, a number, a symbol, mixed case — paints that many meter segments amber then green, writes Weak / Fair / Good / Strong into the label, flips each checklist row between a muted dot and a green check as its rule passes, and keeps the submit button disabled until every rule passes including the two fields matching.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Create a reset-password card with Tailwind CSS. Include a title, a line naming the account being reset, a new password field, a four-segment strength meter bar that starts empty, a small strength label, a confirm field, and a requirements checklist whose items each carry a data-rule attribute. Finish with a full-width dark submit button and a back-to-sign-in link. Then add JavaScript that scores the password on every keystroke — length, a number, a symbol, mixed case — paints that many meter segments amber then green, writes Weak / Fair / Good / Strong into the label, flips each checklist row between a muted dot and a green check as its rule passes, and keeps the submit button disabled until every rule passes including the two fields matching.
