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>

<div style="min-height: 80px">
        <h3>Tech Industry Sale</h3>
    </div>
    <br />
    <div style="height: 150px">
        <div style="width: 30%;">
            Hardware
        </div>
        <div style="width: 70%" id="bulletgraph">
        </div>
    </div>
    <br />
    <div style="height: 150px">
        <div style="width: 30%">
            Software
        </div>
        <div style="width: 70%" id="bulletgraph2">
        </div>
    </div>
    <br />
    <div style="height: 150px">
        <div style="width: 30%">
            Services
        </div>
        <div style="width: 70%" id="bulletgraph3">
        </div>
    </div>
    <br />

JavaScript

$(function () {
                /*----------------- Instantiation -------------------------*/
                var $bulletGraph = $("#bulletgraph");

                $bulletGraph.igBulletGraph({
                    height: "80px",
                    width: "100%",
                    interval: 15000000,
                    //// Gets or sets the interval to use for rendering labels. This defaults to be the same interval as the tickmarks on the scale.
                    //labelInterval: 25000,
                    //// A value to start adding labels, added to the scale's MinimumValue.
                    //labelsPostInitial: 5000,
                    //// A value to stop adding labels, subtracted from the scale's MaximumValue.
                    //labelsPreTerminal: 4000,
                    //// Gets or sets the brush to use for the label font.
                    fontBrush: "#164F6D",
                    formatLabel: function (evt, ui) {
                        ui.label = "$" + ui.label;
                        if (ui.value != 90000000) {
                            var re = /000$/;
                            ui.label = ui.label.replace(re, " K");
                        }
                    },
                    alignLabel: function (evt, ui) {
                        // center the just the number part according to its tick, instead of centering the whole label
                        if (ui.value == 90000000) {
                            ui.offsetX += 20;
                        }
                    },
                    ranges: [
                        {
                            name: 'range1',
                            startValue: 0,
                            endValue: 45000000,
                            brush: '#164F6D'
                        },
                        {
                            name: 'range2',
                            startValue: 45000000,
                            endValue: 60000000,
                           ...