JSFiddle - React, Tailwind, and code Playground

by Bryan Braun

HTML

<div data-se="o-form-fieldset-credentials.passcode" class=
  "o-form-fieldset o-form-label-top">
    <div data-se="o-form-label" class="okta-form-label o-form-label">
      <label for="input71">Password&nbsp;</label>
    </div>

    <div data-se="o-form-input-container" class="o-form-input o-form-has-errors">
      <span data-se="o-form-input-credentials.passcode" class=
      "o-form-input-name-credentials.passcode o-form-control okta-form-input-field input-fix o-form-has-errors">
      <input type="password" placeholder="" name="credentials.passcode" id="input71"
      value="" aria-label="" autocomplete="off" class="password-with-toggle"
      aria-describedby="input-container-error102" aria-invalid="true" /></span>

      <p id="input-container-error102" class=
      "okta-form-input-error o-form-input-error o-form-explain" role="alert">Password
      requirements were not met</p>
    </div>
  </div>

  <div data-se="o-form-fieldset" class="o-form-fieldset custom-password-requirements">
    <div data-se="o-form-label" class="okta-form-label o-form-label">
      <label for="input80">Your password must have at least 8 characters, including a
      lowercase letter, an uppercase letter, and a number.&nbsp;</label>
    </div>

    <div data-se="o-form-input-container" class="o-form-input">
      <div class="o-form-input-group"></div>
    </div>
  </div>

CSS

/* This is the original error, which can be hidden */
[data-se="o-form-fieldset-credentials.passcode"] > .o-form-has-errors {
  opacity: 50%;
}

/* This is the password reqs, which can be made red, based on if there is an
   .o-form-has-errors class in the password field */
[data-se="o-form-fieldset-credentials.passcode"]:has(> .o-form-has-errors) + div {
  color: red;
}