JSFiddle - React, Tailwind, and code Playground

HTML

<form action="">
  <input id="r_password" type="text" class="contacts__input" placeholder="Пароль*">
  <button>btn</button>
</form>


<div class="safe">
  <p>Защита паролем:</p>
  <div class="row">
    <span class="percent" data-progress-value="34"></span>
  </div>
</div>

<div class="wrap">
  <p class="error">пароль должен содержать хотя бы 1 большую букву</p>
  <p class="error">пароль должен содержать хотя бы 1 букву</p>
  <p class="error">пароль должен содержать хотя бы 1 специальный символ (не пробел, букву или цифру)</p>
  <p class="error">пароль должен содержать хотя бы 1 цифру</p>
  <p class="error">пароль должен содержать хотя бы 8 символов</p>
  <p class="error">пароль должен содержать хотя бы 1 букву или цифру</p>
  <p class="error">пароль должен содержать хотя бы 1 маленькую букву</p>
</div>

CSS

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


	.percent {
	  display: block;
	  font-size: 0px;
	  height: 100%;
	  background: #47C965;
	}

.error {
  display: none;
}

.error__active {
  display: block;
}

JavaScript

$(document).ready(function() {

  const elem = $('.percent');

  const value = elem.data('progress-value');

  elem.width(`${value}%`);

})