JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<meter min="-20" max="20" value="0" title="12cm">12cm</meter>

<meter min="0" max="10" high="7" value="9" >5 out of 10</meter>

<br /><br />

<progress max="100" value="50" title="50%">50%</progress>

<progress class="special" max="100" value="50" title="50%">50%</progress>

CSS

.special {
     -webkit-appearance: none;
    appearance: none;
}

.special::-webkit-progress-bar {
     border: 2px solid black;
}

.special::-webkit-progress-value {
     background: red;
}