JSFiddle - React, Tailwind, and code Playground

HTML

<meter max="100" min="0" value="80" class="solid" low="25"></meter>
<br />
<meter max="100" min="0" value="20" class="solid" low="25"></meter>
<br /><br />
<meter max="100" min="0" value="80" class="grad"></meter>
<br />
<meter max="100" min="0" value="20" class="grad"></meter>

CSS

meter {
  background-color: #FCFCFC;
}

meter::-webkit-meter-bar {
  background: none;
  background-color: transparent;
  border-right: 3px solid blue;
}

meter.solid::-webkit-meter-optimum-value {
  background: blue;
  background-size: 100% 100%;
}

meter.solid::-webkit-meter-suboptimum-value {
  background: red;
  background-size: 100% 100%;
}

meter.grad::-webkit-meter-optimum-value {
  background: linear-gradient(90deg, red 10px, blue 20px);
  background-size: 100% 100%;
}