JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progress" style="--point: 70%">
  Прогресс 70%
</div>
<div class="progress" style="--point: 45%">
  Прогресс 45%
</div>
<div class="progress" style="--point: 30%">
  Прогресс 30%
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 50px;
  font-family: 'Neucha', cursive;
}


div {
  margin-bottom: 20px;
  background: #999 linear-gradient(to right, green var(--point), transparent var(--point));
  color: white;
  text-align: center;
}