JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <progress value="6" max="10"></progress>
</div>
<div>
  <progress value="9" max="10"></progress>
</div>
<div>
  <progress class="unique" value="9" max="10" data-label="90% completed"></progress>
</div>
<div>
  <progress class="unique" value="0" max="10" data-label="About to begin"></progress>
</div>
<div>
  <progress class="unique" value="5" max="10"></progress>
</div>

CSS

progress
{
  text-align:center;
  height:25px;
  width:200px;
}
progress:before {
  content: 'Value is ' attr(value);
  position:relative;
  top:5px;
}
.unique:before {
  content: attr(data-label);
}