JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>

<div style="min-height:50px">
        <h3>Healthy Eating</h3>
    </div>
    <br />
    <div>
        <div style="width:30%">
            Fat
        </div>
        <div style="width:70%" id="lineargauge1">
        </div>
    </div>
    <br />
    <div>
        <div style="width:30%">
           Carbohydrates
        </div>
        <div style="width:70%" id="lineargauge2">
        </div>
    </div>
    <br /> 
    <div>
        <div style="width:30%">
            Protein
        </div>
        <div style="width:70%" id="lineargauge3">
        </div>
    </div>
    <br />
    Total calories intake ratio between fat, carbohydrates and protein, where middle ranges are healthy ratios and the target values - ideally set goals.

JavaScript

$(function () {
            var $linearGauge = $("#lineargauge1");

            $linearGauge.igLinearGauge({
                width: '100%',
                height: '80px', 
                ranges: [
                    {
                        brush: '#FDB881',
                        name: 'bad',
                        startValue: 0,
                        endValue: 20
                    },
                    {
                        brush: '#F18B36',
                        name: 'acceptable',
                        startValue: 20,
                        endValue: 35
                    },
                    {
                        brush: '#D2660D',
                        name: 'good',
                        startValue: 35,
                        endValue: 100
                    }
                ], 
                value: 40, 
                needleStrokeThickness: 2,
                formatLabel: function (evt, ui) {
                    ui.label += "%";
                }
            });

            var $linearGauge2 = $("#lineargauge2");

            $linearGauge2.igLinearGauge({
                width: '100%',
                height: '80px', 
                ranges: [
                    {
                        brush: '#ABD652',
                        name: 'bad',
                        startValue: 0,
                        endValue: 45
                    },
                    {
                        brush: '#739F19',
                        name: 'acceptable',
                        startValue: 45,
                        endValue: 65
                    },
                    {
                        brush: '#527211',
                        name: 'good',
                        startValue: 65,
                        endValue: 100
                    }
                ], 
                value: 35,
                labelExtent: 0.76,
                tickStartExtent: 0.5,
                minorTickEndExtent: 0.54,
               ...