JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rating-bar-bg-overall" title="87%">
    <div class="rating-bar" style="width:87%;" title="34%" data-size="34">
        <span id="overall" class="rb-label">Overall</span>
    </div>
</div>

<div class="rating-bar-bg" title="88%">
    <div class="rating-bar" style="width:88%;" title="55%" data-size="55">
        <span class="rb-label">Design</span>
    </div>
</div>

<div class="rating-bar-bg" title="91%">
    <div class="rating-bar" style="width:91%;" title="60%" data-size="60">
        <span class="rb-label">Performance</span>
    </div>
</div>

<div class="rating-bar-bg" title="93%">
    <div class="rating-bar" style="width:93%;" title="93%" data-size="100">
        <span class="rb-label">Hardware</span>
    </div>
</div>

<div class="rating-bar-bg" title="85%">
    <div class="rating-bar" style="width:85%;" title="85%" data-size="85">
        <span class="rb-label">Software</span>
    </div>
</div>

<div class="rating-bar-bg" title="77%">
    <div class="rating-bar" style="width:77%;" title="77%" data-size="77">
        <span class="rb-label">Battery</span>
    </div>
</div>

CSS

.rating-bar-bg {
	width: auto;
	background-color: #1a1a1a;
	margin: 0.5em 0 0 1em;
	border: 1px solid #090909;
}
.rating-bar-bg-overall {
	width: auto;
	background-color: #1a1a1a;
	margin: 0.5em 0;
	border: 1px solid #090909;
}
.rating-bar {
	line-height: 2;
	background-color: #3a8d24;
	outline: none;
	transition: all 1s linear 0s;
    font-family: Tahoma, Verdana, sans-serif;
}
.rb-label {
	color: #ffffff;
	font-weight: bold;
	text-shadow: 2px 1px 0 #112a0a;
	text-transform: uppercase;
	margin-left: 0.5em;
}
#overall {
	font-size: 1.25em;
}

JavaScript

$(document).ready(function() {
  $('.rating-bar').each(function(){
      var $bar=$(this), size=$bar.data('size');
        $bar.width(size+'%').css("background-color", getBackground( size))
    });
   
})



function getBackground( e){
    var  color= "#a41818";/* < 24*/
     if (e >= 25 && e < 50) {
             color= "#87581c";
        } else if (e >= 50 && e < 75) {
            color=  "#997815";
        } else if (e >= 75 && e < 91) {
            color=  "#7ba01c";
        } else if (e >= 91) {
            color=  "#3a8d24";
        }
    
    return color
    
}