JSFiddle - React, Tailwind, and code Playground

by NicosKaralis

HTML

<div id="container">
    <div id="sidebar">
        <div id="graph">
            <div id="container-speed"></div>
            <div id="container-ppb"></div>
        </div>
    </div>
    <div id="main-area">
        <div id="graph"></div>
        <div id="stats"></div>
        <div id="bets">
            <ul>
                <li>Bet #1</li>
                <li>Bet #2</li>
                <li>Bet #3</li>
                <li>Bet #4</li>
                <li>Bet #5</li>
                <li>Bet #6</li>
                <li>Bet #7</li>
                <li>Bet #8</li>
                <li>Bet #9</li>
                <li>Bet #10</li>
            </ul>
        </div>
    </div>
</div>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<!-- <script src="http://code.highcharts.com/modules/exporting.js"></script> -->
<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>

CSS

html, body, #container {
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
    border:none;
}
#sidebar {
    background-color: blue;
    height: 100%;
    width: 300px;
    float:left;
}
#sidebar #graph {
    width: 300px;
    height: 300px;
    margin: auto;
}
#sidebar #graph #container-speed, #sidebar #graph #container-ppb {
    margin:0;
    padding:0;
    border:none;
    width: 50%;
    height: 100%;
    float: left;
}
#main-area {
    top:0;
    bottom: 0;
    left: 300px;
    right: 0;
    position: absolute;
    overflow: scroll;
}
#main-area #graph, #main-area #stats {
    background-color: red;
    height: 200px;
    width: 100%;
}
#main-area #bets {
    background-color: green;
}

JavaScript

$(function () {
    // The RPM gauge
    $('#container-ppb').highcharts({
        chart: {
            type: 'solidgauge'
        },
        title: false,
        tooltip: false,
        credits: false,
        pane: {
            center: ['0%', '40%'],
            size: '150%',
            startAngle: 0,
            endAngle: 180,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc',
            },
        },
        yAxis: {
            min: -0.05,
            max: 0.05,
            title: false,
            stops: [
                [0.1, '#DF5353'], // red
                [0.3, '#DDDF0D'], // yellow
                [0.9, '#55BF3B'], // green
                ],
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            labels: {
                enabled: false
            },
        },

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 150,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        },

        series: [{
            name: 'PPB',
            data: [0],
            dataLabels: {
                format: '<div style="text-align:center;width:140px"><span style="font-size:18px;color:' + ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.8f}</span><br/>' +
                    '<span style="font-size:12px;color:silver"> profit / bet</span></div>'
            }
        }]

    });

    // The speed gauge
    $('#container-speed').highcharts({
        chart: {
            type: 'solidgauge'
        },
        title: false,
        tooltip: false,
        credits: false,
        pane: {
            center: ['100%', '40%'],
            size: '150%',
            startAngle: -180,
      ...