JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contacts__box">
  <div class="contacts__wrapper-input">
    <input id="r_password" type="text" class="contacts__input" placeholder="Пароль*">
    <label for="r_password" class="contacts__label">Пароль*</label>
  </div>
</div>

<div class="reg__safe">
  <p>Захища паролем:</p>
  <div class="reg__row">
    <span class="reg__progress"></span>
  </div>
</div>


<div class="reg__wrapper-error" data-error_1="Пароль должен содержать по крайней мере 1 прописную букву ." data-error_2="Пароль должен содержать по меньшей мере 1 строчную букву. " data-error_3="Пароль должен содержать по крайней мере один специальный символ (не пробел, букву или цифру). " data-error_4="Пароль должен содержать не менее 1 цифру. " data-error_5="Пароль должен содержать не менее 8 символов.">
  <h3>Пароль не отвечает требованиям защиты паролем. </h3>
  <ul class="reg__info"></ul>
</div>

CSS

.reg__row {
	width: 100%;
	height: 8px;
	background-color: #dbdbdb;
}

.reg__progress {
	display: block;
	font-size: 0px;
	width: 0px;
	height: 100%;
	background-color: #fff;
}

JavaScript

$(document).ready(function() {


  if ($('.reg__safe').length > 0) {

    const error_wrap = $('.reg__wrapper-error');

    const tests = [{
        regex: /[A-ZА-ЯЁ]/,
        message: error_wrap.attr('data-error_1')
      },
      {
        regex: /[a-zа-яё]/,
        message: error_wrap.attr('data-error_2')
      },
      {
        regex: /[^\s\da-zа-яё]/i,
        message: error_wrap.attr('data-error_3')
      },
      {
        regex: /\d/,
        message: error_wrap.attr('data-error_4')
      },
      {
        regex: /^.{8,}$/,
        message: error_wrap.attr('data-error_5')
      },
    ];

    $('#r_password').on('input', ({
      target: {
        value
      }
    }) => {
      const errors = tests.map(n => n.regex.test(value) || n.message).filter(n => n !== true);
      const strength = (tests.length - errors.length) / tests.length * 100;
      console.log(strength);
      
      let progress = $('.reg__progress');

      if (strength == 20) {
        progress.css( "background-color", "#bf4542" );
      } else if(strength == 100){
        progress.css( "background-color", "#47C965" );
      } else {
      progress.css( "background-color", "#f5dd30" );
      }

      $('.reg__progress').css("width", strength + '%');

      $('.reg__info').html(errors.map(n => `<li>${n}</li>`).join(''));

    });

  }

})