JSFiddle - React, Tailwind, and code Playground

HTML

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

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

    </div>
</div>
<div class="rating-bar-bg" title="91%">
    <div class="rating-bar" style="width:91%;" title="91%" data-size="91"> <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 () {
    var bar = $('.rating-bar');
    bar.css("background-color", "#7ba01c");


    //
    //Adapted from - http://stackoverflow.com/a/19797657/1773199
    //

    var parentWidth = parseInt($('.rating-bar-bg').css("width"));
    $('.rating-bar').each(function () {
        var e = $(this).css("width");
        e = parseInt(e);
        ratio = e / parentWidth * 100;
        if (ratio <= 24) {
            $(this).css("background-color", "#a41818");
        } else if (ratio >= 25 && e < 50) {
            $(this).css("background-color", "#87581c");
        } else if (ratio >= 50 && e < 75) {
            $(this).css("background-color", "#997815");
        } else if (e >= 75 && e < 91) {
            $(this).css("background-color", "#7ba01c");
        } else if (ratio >= 91) {
            $(this).css("background-color", "#3a8d24");
        }
    });
});