JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<meter min="0" optimum="10" low="30" high="70" max="100" value="120">120</meter>
<meter min="0" optimum="10" low="30" high="70" max="100" value="60">60</meter>
<meter min="0" optimum="10" low="30" high="70" max="100" value="30">30</meter>

CSS

meter {
    -webkit-appearance: none;
}

meter::-webkit-meter-bar {
    background: black;
}

meter::-webkit-meter-optimum-value {
    background: blue;
}

meter::-webkit-meter-suboptimum-value {
    background: yellow;
}

meter::-webkit-meter-even-less-good-value {
    background: red;
}