JSFiddle - React, Tailwind, and code Playground

by Anu Vidhya

HTML

<meter min="0" max="100" low="25" high="75" optimum="100" value="87" id="progrssbar"></meter>

CSS

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  background: #333;
}

#page-wrapper {
  width: 640px;
  background: #FFFFFF;
  padding: 1em;
  margin: 1em auto;
  border-top: 5px solid #69c773;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}


meter{
  width: 50%;
}


/* WebKit */
.styled meter::-webkit-meter-bar {
  background: #EEE;
  box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
  border-radius: 3px;
}

.styled meter::-webkit-meter-optimum-value,
.styled meter::-webkit-meter-suboptimum-value,
.styled meter::-webkit-meter-even-less-good-value {
  border-radius: 13px;
}

.styled meter::-webkit-meter-optimum-value {
  background: #86CC00;
}

.styled meter::-webkit-meter-suboptimum-value {
  background: #FFDB1A;
}

.styled meter::-webkit-meter-even-less-good-value  {
  background: #CC4600;
}


/* Firefox */
.styled meter::-moz-meter-bar {
  border-radius: 3px;
}

.styled meter:-moz-meter-optimum::-moz-meter-bar {
  background: #86CC00;
}

.styled meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: #FFDB1A;
}

.styled meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: #CC4600;
}