JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script>
<script src="//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<h3>How am i doing?</h3>

<div class="row-fluid">
    <div class="span4">	<a class="tipsPopover" title="Tips" data-toggle="popover" data-placement="bottom" text-align="center" data-content="This will be some content including a helpful tip on how to improve, based on the value given.">
                				<div id="g1">
                				</div></a>

    </div>
    <div class="span4">
        <div id="g2"></div>
    </div>
    <div class="span4">
        <div id="g3"></div>
    </div>
</div>

JavaScript

$(window).load(function () {

        var gageValue1 = getRandomInt(0, 200)
        var gageValue2 = getRandomInt(0, 200)
        var gageValue3 = getRandomInt(0, 200)
        var colorGradientRYG = ["#991D1D", "#9D1F1F", "#A22222", "#A62424", "#AB2727", "#B02929", "#B42C2C", "#B92E2E", "#BE3131", "#C23333", "#C73636", "#CC3939", "#CE4236", "#D14B33", "#D35530", "#D65E2D", "#D8672A", "#DB7127", "#DD7A24", "#E08321", "#E28D1E", "#E5961B", "#E8A019", "#E9A619", "#EBAD1A", "#ECB41A", "#EEBB1B", "#F0C21C", "#F1C81C", "#F3CF1D", "#F5D61E", "#F6DD1E", "#F8E41F", "#FAEB20", "#F4EB25", "#EEEB2B", "#E9EC31", "#E3EC36", "#DEEC3C", "#D8ED42", "#D3ED48", "#CDED4D", "#C8EE53", "#C2EE59", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BBED5C", "#B9EC59", "#B8EA56", "#B6E954", "#B4E851", "#B3E64E", "#B1E54B", "#AFE449", "#AEE246", "#ACE143", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#AAE03E", "#A9E03C", "#A8E03A", "#A8E037", "#A7E035", "#A6E033", "#A5E031", "#A5E02E", "#A4E02C", "#A3E02A", "#A3E028", "#A4E224", "#A5E520", "#A6E81D", "#A7EB19", "#A8EE15", "#A9F012", "#AAF30E", "#ABF60A", "#ACF907", "#ADFC03", "#AEFF00"]
        var g1 = new JustGage({
            id: "g1",
            title: "Gage 1",
            value: 92,
            min: 0,
            max: 200,
            showMinMax: false,
            levelColors: colorGradientRYG,
            levelColorsGradient: false,
        });
        var g2 = new JustGage({
            id: "g2",
            title: "Gage 2",
            value: 98,
            min: 0,
            max: 200,
            showMinMax: false,
            levelColors: colorGradientRYG,
            levelColorsGradient: false,
        });
        var g3 = new JustGage({
            id: "g3",
            title: "Gage 3",
            value: 77,
            min: 0,
            max: 200,
 ...