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.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://igniteui.com/js-data/wind"></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>

<table id="grid"></table>

JavaScript

$(function () {
var lg; 
        $(function () {

            $("#grid").igGrid({
                height: 500,
                primaryKey:"id",
                columns: [
                    { headerText: "id", key: "id", dataType: "number", hidden: true},
                    { headerText: "Time", key: "Time", dataType: "string", width: 80 },
                    { headerText: "Wind Speed (mph)", key: "WindSpeed", dataType: "number", width: 160 },
                    { headerText: "Wind Speed Gauge (mph)", key: "gauge", width: 370, template: "<div class='linear-gauge' ></div>" }
                ],
                dataSource: data,
                autoGenerateColumns: false,
                rowsRendered: function (evt, ui) {
                    $(".linear-gauge").each(function (i) {
                        var item = data[i];
                        $(this).igLinearGauge({
                            height: "60px",
                            width: "100%",
                            backingBrush: "transparent",
                            backingOutline: "transparent",
                            minimumValue: 0,
                            maximumValue: 9,
                            scaleEndExtent: 0.9,
                            labelsPostInitial: 1, 
                            value: item.WindSpeed,
                            needleBrush: "white",
                            needleOutline: "#2582a9",  
                            ranges: [
                                { name: "calm", startValue: 0, endValue: 1 },
                                { name: "lightAir", startValue: 1, endValue: 4 },
                                { name: "lightBreeze", startValue: 4, endValue: 7 },
                                { name: "gentleBreeze", startValue: 7, endValue: 9 }
                            ],
                            transitionDuration: 1200, 
                            labelInterval: 2,
                            interval: 1
                       ...