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>

<script id="rangeToolTipTemplate" type="text/x-jquery-tmpl">
        <div style="background-color: #3E3E3E; border: 1px solid black; font-size: 120%; font-weight: bold; padding: 5px 10px; border-radius: 0em 1em 0em 1em; color:${itemBrush}">
            ${item.name}
                <br />
            開始日付: ${item.startValue}<br />
            終了日付: ${item.endValue}
        </div>
    </script>
<script id="valueToolTipTemplate" type="text/x-jquery-tmpl">
        <div style="background-color: #3E3E3E; border: 1px solid black; font-size: 120%; font-weight: bold; padding: 5px 10px; border-radius: 0em 1em 0em 1em; color:white">
            ${itemName}: ${item.value}
        </div>
    </script>
<script id="targetValueToolTipTemplate" type="text/x-jquery-tmpl">
        <div style="background-color: #3E3E3E; border: 1px solid black; font-size: 120%; font-weight: bold; padding: 5px 10px; border-radius: 0em 1em 0em 1em; color:white">
            予定期間: ${item.value}
        </div>
    </script>

<div>
        <h3 style="height: 100px">タスク実装の進行状況</h3>
        <div style="height: 200px">
            <div style="width: 30%">
               ...

JavaScript

$(function () {
            $("#bulletgraph_task1").igBulletGraph({
                height: "80px",
                width: "100%",
                showToolTip: true,
                ranges: [
                    {
                        name: '低',
                        startValue: 0,
                        endValue: 40,
                        brush: "#F66656"
                    },
                    {
                        name: '中',
                        startValue: 40,
                        endValue: 70,
                        brush: "#FFDA30"
                    },
                    {
                        name: '高',
                        startValue: 70,
                        endValue: 100,
                        brush: "#72CA70"
                    }
                ],
                formatLabel: function (evt, ui) {
                    ui.label = ui.value + "h";
                },
                value: 60,
                targetValue: 80,
                targetValueBreadth: 6,
                transitionDuration: 500
            });

            $("#bulletgraph_task2").igBulletGraph({
                height: "80px",
                width: "100%",
                showToolTip: true,
                rangeToolTipTemplate: 'rangeToolTipTemplate',
                valueToolTipTemplate: 'valueToolTipTemplate',
                targetValueToolTipTemplate: 'targetValueToolTipTemplate',
                ranges: [
                     {
                         name: '低',
                         startValue: 0,
                         endValue: 20,
                         brush: "#F66656"
                     },
                     {
                         name: '中',
                         startValue: 20,
                         endValue: 35,
                         brush: "#FFDA30"
                     },
                     {
                         name: '高',
                         startValue: 35,
                         endValue:...