JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></script>
<h1 class='logo'>FINANCE STOCK DASHBOARD</h1>
<!-- BEGIN MAIN LAYOUT -->
<div id="stockDetails" class="container"></div>
<div id="chartContainer">
    <div id="priceChart">
        <div id="seriesSwitch">
            <ol id="selectable">
                <li class="ui-state-default ui-selected" data-type="candlestick">Candlestick</li>
                <li class="ui-state-default" data-type="ohlc">OHLC</li>
            </ol>
        </div>
    </div>
</div>
<div id="volumeChart"></div>
<div class="icon">	<a href="#" onclick="openDialog('indicatorDialog')"><span class="ui-icon ui-icon-gear"></span> type/period</a>
    
</div>
<div id="indicatorChart"></div>
<div id="dialog" style="vertical-align: bottom; display: none;">
    <label>Enter a valid stock ticker symbol (eg. INTC)</label>
    <input type="text" id="ticker" onchange="update(this.value)" />
</div>
<div id="indicatorDialog" style="vertical-align: bottom; display: none;">
    <label>Select Indicator:</label>
    <div id="indicatorCombo"></div>
    <p>
        <label>Period slider:</label>
        <label id="period">14</label>
    </p>
    <div id="periodSlider"></div>
</div>
<!-- END MAIN LAYOUT -->

<script id="tooltipTemplate" type="text/x-jquery-tmpl">
    <div>
        <span>Open: ${item.Open}</span><br/>
        <span>High: ${item.High}</span><br/>
        <span>Low: ${item.Low}</span><br/>
        <span>Close: ${item.Close}</span><br/>
    </div>
</script>
<!-- Big template for the topmost info, keep scrolling :) -->
<script id="stockDetailsTemplate" type="text/x-jquery-tmpl">
    <div class="column">
        <div> ${Name} (${Symbol}) <a href="#" onclick="openDialog('dialog')">change</a></div> 
        <div class="large" > ${LastTradeAmount} (${PercentAndChange})</div>
        <div class="ui-icon ui-icon-info" title="You can change the stock ticker to any valid symbol (Sorry, no comparison yet!). The...

CSS

body {
    font-family:"Segoe UI", "Segoe", "Segoe WP", "Tahoma", "Verdana", "Arial", "sans-serif";
    font-size: 0.8em;
}
.ui-widget-content.ui-chart-container {
    border: none;
    text-align:center;
}
#seriesSwitch {
    float:right;
    right: 5%;
    top: 1em;
    z-index: 9999;
    padding: .1em;
    position: relative
}
.icon span {
    display: inline-block;
}
.icon a {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.5);
}
.container {
    width: auto;
    overflow:auto;
    padding: 0px;
}
.column {
    width: 49%;
    float:left;
    margin: 0.5%;
    padding: 0px;
}
.cell:hover {
    background-color: rgb(133, 133, 133);
    cursor: default;
}
#cut {
    width: 7em !important;
    height: 1.3em;
    max-width: 200px;
    overflow: hidden;
}
.large {
    font-size:2em;
}
#selectable li {
    float: left;
    cursor: pointer;
    padding: 0.2em;
    list-style: none;
}
#selectable .ui-selecting {
    background: #917272;
}
#selectable .ui-selected {
    text-shadow: none;
    background: #f3f1ea;
    color:#000;
}

/* --- Unrelated sample styling --- */
.logo
{
    background-image: url('http://www.infragistics.com/uploadedImages/Content/PRODUCTS/jQuery/ignite-secondary-navigation-logo.png');
    background-repeat: no-repeat;
    padding-left: 135px;
    margin: 5px;
    vertical-align: top;
    font-size: 1.2em;
}

JavaScript

var schema, ds, ticker = "MSFT";
$.ig.loader({
    scriptPath: "http://cdn-na.infragistics.com/jquery/20122/latest/js/",
    cssPath: "http://cdn-na.infragistics.com/jquery/20122/latest/css/"
});

$.ig.loader("igDataChart.Financial.Category", function () {
    schema = new $.ig.DataSchema("json", {
        fields: [{
            name: "Close",
            type: "number"
        }, {
            name: "High",
            type: "number"
        }, {
            name: "Low",
            type: "number"
        }, {
            name: "Open",
            type: "number"
        }, {
            name: "Volume",
            type: "number"
        }, {
            name: "Date",
            type: "date"
        }],
        searchField: "value.items"
    });
    ds = new $.ig.DataSource({
        dataSource: "https://api.blockchain.info/charts/market-price?format=json",
        callback: render,
        schema: schema,
        responseDataType: "jsonp",
        sorting: {
        type: "local"
    }
                             });
    ds.dataBind();
    updateDetails();
});

function updateDetails() {
    //Add the additional details Info on top of the Dashboard
    var detailsDs = new $.ig.DataSource({
        callback: function () {
            $("#stockDetails").html($.ig.tmpl($("#stockDetailsTemplate").html(), detailsDs.dataView()));
        },
        responseDataKey: "value.items",
        dataSource: "https://api.blockchain.info/charts/market-price?format=json" + ticker
    });
    detailsDs.dataBind();
}

/**
* The Data Charts setup
*/
function render() {
    //sort the data for plotting first
    ds.sort([{fieldName: "Date"}], "asc", false);
    //and then initialize the Charts:
    $("#priceChart").igDataChart({
        width: "100%",
        height: "350px",
        windowResponse: "deferred",
        horizontalZoomable: true,
        dataSource: ds.dataView(),
        leftMargin: 30,
        rightMargin: 30,
        windowRectMinWidth: 0.05,
        axes: [{
   ...