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>
<script src="https://igniteui.com/js-data/MultiData"></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 rel="stylesheet" href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css"></link>
<link rel="stylesheet" href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.financialchart.css"></link>

<div id="chart" style="width:98%;height:500px"></div>
    
    <div style="width:98%;height:300px">
        <fieldset id="chartOptions">
            <legend>Axis Settings</legend>

            <table>
                <tr> 
                    <td>
                        <div class="optionContainer">
                            <label>X-Axis Mode</label>
                            <select id="xAxisMode" class="selectBounds">
                                <option value="ordinal">Ordinal</option>
                                <option value="time">Time</option>
                            </select>
                        </div>
                    </td> 
                         
                    <td>
                        <div class="optionContainer">
                            <label>X-Axis Label Visibility</label>
                            <select id="xAxisLabelVisibility" class="selectBounds">
                                <option value="visible">Visible</option>
             ...

CSS

.sliderBounds {
            width: 150px;
            margin: 6px 3px 6px 6px;
            display: inline-block;
        }
        .selectBounds {
            width: 100%;
            margin: 5px 5px 5px 5px; 
        }
        .optionContainer {
            width: 200px;
            height: 80px;
            margin: 2px;
            padding: 2px;
            display: inline-block;
            /*border: 1px solid #e0e0e0;*/
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
        }

JavaScript

$(function () {
            var stocks = []; 
            stocks.push(StockData.AMZN());
            stocks.push(StockData.GOOG());

            $("#chart").igFinancialChart({
                dataSource: stocks,
                zoomSliderType: "none", 
                volumeType: "line", 
                xAxisMode: "ordinal",
                yAxisMode: "numeric",
                xAxisLabelVisibility: "visible",
                yAxisLabelVisibility: "visible",
                xAxisLabelAngle: 0,
                yAxisLabelAngle: 0,
                xAxisLabelTextStyle: "10pt Verdona",
                yAxisLabelTextStyle: "10pt Verdona",
            }); 
            
            $("#xAxisMode").selectmenu({
                select: function(evt, ui) {
                    $("#chart").igFinancialChart("option", "xAxisMode", ui.item.value);
                }
            });
            $("#yAxisMode").selectmenu({
                select: function(evt, ui) {
                    $("#chart").igFinancialChart("option", "yAxisMode", ui.item.value);
                }
            });
            $("#xAxisLabelVisibility").selectmenu({
                select: function(evt, ui) {
                    $("#chart").igFinancialChart("option", "xAxisLabelVisibility", ui.item.value);
                }
            });
            $("#yAxisLabelVisibility").selectmenu({
                select: function(evt, ui) {
                    $("#chart").igFinancialChart("option", "yAxisLabelVisibility", ui.item.value);
                }
            });
            
            $("#xAxisLabelAngleSlider").slider({
                min: -90, max: 90, value: 0,
                slide: function (event, ui) {
                    $("#chart").igFinancialChart("option", "xAxisLabelAngle", ui.value);
                    $("#xAxisLabelAngle").text(ui.value);
                }
            });

            $("#yAxisLabelAngleSlider").slider({
                min: -90, max: 90, value: 0,
                slide:...