JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.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://jp.igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div style="min-height:50px">
        <h3>Sunkost: 2013 年の売上げ目標</h3>
    </div>
    <br />
    <div>
        <div style="width:30%">
            年度売上
        </div>
        <div style="width:70%" id="lineargauge">
        </div>
    </div>
    <br />
    <div>
        <div style="width:30%">
           利益
        </div>
        <div style="width:70%" id="lineargauge2">
        </div>
    </div>
    <br />
    <div>
        <div style="width:30%">
            平均注文
        </div>
        <div style="width:70%" id="lineargauge3">
        </div>
    </div>
    <br />
    <div>
        <div style="width:30%">
            利益
        </div>
        <div style="width:70%" id="lineargauge4">
        </div>
    </div>
    <br />
    2013 年度の販売 (水平の白線) は、2012 年全体 (垂直の白線) の販売を 400 万ドル超えました。2013 年度の販売において、新しく導入した販売活動が成功したことを示しています。更に市場浸透が増加し、販売も向上しました。

JavaScript

$(function () {

            var $linearGauge = $("#lineargauge");

            $linearGauge.igLinearGauge({
                width: '100%',
                height: '80px',
                transitionDuration: 500,
                ranges: [
                    {
                        brush: '#803E01',
                        name: 'bad',
                        startValue: 0,
                        endValue: 5200
                    },
                    {
                        brush: '#BA5A05',
                        name: 'acceptable',
                        startValue: 5200,
                        endValue: 6400
                    },
                    {
                        brush: '#FF7A04',
                        name: 'good',
                        startValue: 6400,
                        endValue: 10000
                    }
                ],
                minimumValue: 0,
                maximumValue: 10000,
                value: 6000,                 
                needleShape:'rectangle',
                needleBrush:'orange',
                needleOutline:'#803e01',
                needleStrokeThickness: 2,
                formatLabel: function (evt, ui) {
                    ui.label += "K";
                }
            });

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

            $linearGauge2.igLinearGauge({
                width: '100%',
                height: '80px',
                transitionDuration: 500,
                ranges: [
                    {
                        brush: '#566509',
                        name: 'bad',
                        startValue: 0,
                        endValue: 3400
                    },
                    {
                        brush: '#7F950C',
                        name: 'acceptable',
                        startValue: 3400,
                        endValue: 4000
                    },
                    {
                        brush: '#AABF31',
                ...