JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progress progress-70">
  70%
</div>
<div class="progress progress-45">
  45%
</div>
<div class="progress progress-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;
}


.progress {
  min-width: 100px;
  margin-bottom: 20px;
  background: #999 linear-gradient(to right, green var(--point), transparent var(--point));
  color: white;
  text-align: right;
}
.progress::after {
  content: "";
  display: inline-block;
  width: calc(100% - var(--point));
  max-width: calc(100% - 30px);
}

.progress-70 {
  --point: 70%
}

.progress-45 {
  --point: 45%;
}

.progress-30 {
  --point: 30%;
}