JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Control</title>
    </head>
    <body>
        <div id="component">
            <div class="green" data-value="15"></div>
            <div class="lightgreen" data-value="25"></div>
            <div class="yellow" data-value="40"></div>
            <div class="lightred" data-value="11"></div>
            <div class="red" data-value="18"></div>
        </div>
    </body>
</html>

CSS

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

body {
    margin: 20px auto;
    padding: 10px;
    width: 500px;
}

#component {
    width: 100%;
    height: 30px;
    border: 3px solid #DDD;
    border-radius: 30px;
    overflow: hidden;
}

.green {background-color: #4D7A28;}
.lightgreen {background-color: #77BB3F;}
.yellow {background-color: #FEC700;}
.red {background-color: #B51A00;}
.lightred {background-color: #FF4013;}

.ci {height: 100%; float: left;}

JavaScript

(function () {
    var constant,
        total = 0,
        attr = 'data-value';
    
    $('#component').children().each(function () {
        total += Number($(this).attr(attr));
    });
    
    constant = 100 / total;
    
    $('#component').children().each(function () {
        var $el = $(this);
        $el.css({
            width: ($el.attr(attr) * constant) + '%'
        }).addClass('ci');
    });
})();