JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="bi-dashboard">
<div id="dashboard-top">
    <div id="active-initiatives" class="bi-dashboard-small-panel">
        <span class="dashboard-small-title">Active Initiatives</span>
        <span class="dashboard-small-data">30</span>
    </div>
    <div id="delayed-initiatives" class="bi-dashboard-small-panel">
        <span class="dashboard-small-title">Delayed Initiatives</span>
        <span class="dashboard-small-data">7</span>
    </div>
    <div id="overdue-action" class="bi-dashboard-small-panel">
        <span class="dashboard-small-title">Overdue Action Items</span>
        <span class="dashboard-small-data">15</span>
    </div>
    <div id="open-action" class="bi-dashboard-small-panel">
        <span class="dashboard-small-title">Open Action Items</span>
        <span class="dashboard-small-data">36</span>
    </div>
    <div id="outcomes" class="bi-dashboard-small-panel">    
        <span class="dashboard-small-title">Outcomes</span>
        <span class="dashboard-small-data">0</span>
    </div>
</div>
<div id="dashboard-middle">
    <div id="active-initiatives-timeline" class="bi-dashboard-large-chart-panel">
        <div class="dashboard-panel-header">
            <span>Active Initiative Timeline</span>
            <div class="dashboard-select"><select><option value="Last 60 Days">Last 60 Days</option></select></div>
        </div>
        <div class="dashboard-chart-navigation">
            <div class="dashboard-btn">Active</div>
            <div class="dashboard-btn">Paused</div>
            <div class="dashboard-btn">Stopped</div>
            <span>Batch Age: 86 Days</span>
        </div>
        <div class="dashboard-chart"><div id="container" style="min-width: 100%; height: 240px; margin: 0 auto"></div>
</div>
    </div>
    <div class="bi-dashboard-medium-panel">
         <div...

CSS

#bi-dashboard{padding:10px;position:relative;font-family: helvetica;font-size: 13px;}
.dashboard-select{float:right;margin-top:3px;margin-right:3px;}
#dashboard-top{min-width: 500px;width:100%;margin-bottom:10px;float:left;}
.bi-dashboard-small-panel{ width: 16.455%; height: 75px; border:1px solid #999999; float:left; margin-right: 5px;padding:10px;border-radius:4px;}
.bi-dashboard-small-panel span {float:left; width:100%; text-align:center;margin-bottom:2px;}
.dashboard-small-title{font-size:14px;font-weight:bold;}
.dashboard-small-data{font-size: 30px;font-weight: bold;}
#dashboard-middle{min-width: 500px;width:100%;margin-bottom:10px;float:left;}
.dashboard-panel-header {width:100%;border-bottom:1px solid #999999;}
.dashboard-panel-header span{ display: inline-block;font-family: helvetica;font-size: 12px;font-weight: bold;padding: 10px !important;}
.dashboard-chart-navigation {background:#F8F8F8;width:100%;border-bottom:1px solid #999999;min-height:30px;}
.dashboard-chart-navigation span {float:right;}
.dashboard-btn{padding:10px;float:left;}
.dashboard-chart { width:100%;height:250px;}
.bi-dashboard-large-chart-panel {width:62%;border-radius:4px; border:1px solid #999999;float:left; margin-right:10px;}
.bi-dashboard-medium-panel {width: 30.5%; height: 320px; float:left; margin-right: 10px;border-radius:4px; border:1px solid #999999;}

th{font-weight:bold;}
tr:nth-child(even) {background: #F8F8F8; height: 30px;}
tr:nth-child(odd) {background: #FFF; height: 30px;}

.table-wrapper {padding:10px;}

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'area'
            },
            title: {
                text: 'US and USSR nuclear stockpiles'
            },
            subtitle: {
                text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">'+
                    'thebulletin.metapress.com</a>'
            },
            xAxis: {
                labels: {
                    formatter: function() {
                        return this.value; // clean, unformatted number for year
                    }
                }
            },
            yAxis: {
                title: {
                    text: 'Nuclear weapon states'
                },
                labels: {
                    formatter: function() {
                        return this.value / 1000 +'k';
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    return this.series.name +' produced <b>'+
                        Highcharts.numberFormat(this.y, 0) +'</b><br/>warheads in '+ this.x;
                }
            },
            plotOptions: {
                area: {
                    pointStart: 1940,
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            },
            series: [{
                name: 'USA',
                data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,
                    1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                    27387, 29459,...