JSFiddle - React, Tailwind, and code Playground

by Loxos

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
  <div class="content">
    <div class="grid grid-container-100">
      <div class="card">
        <div id="uniqueChart"></div>
      </div>
    </div>
    <div class="grid grid-container-33">
      <div class="card">
        <span>Quick Check</span>
      </div>
    </div>
    <div class="grid grid-container-33">
      <div class="card">
        <span>Quick Check</span>
      </div>
    </div>
    <div class="grid grid-container-33">
      <div class="card">
        <span>Quick Check</span>
      </div>
    </div>
  </div>
</div>

CSS

body,
.container {
  background-color: lightgray;
}

.content {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.grid {
  margin: 30px;
  background-color: white;
  padding: 10px;
  min-height: 300px;
  float: left;
}

.grid-container-100 {
  width: 100%;
}

.grid-container-33 {
  width: 30%;
}

JavaScript

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.arrayToDataTable([
    ['run','detail', 'E : CHICAGO MERCANTILE EXCHANGE', 'E : EUREX LEVEL 1', 'E : OPTIONS PRICE REPORTING AUTHORITY', 'E : CHICAGO BOARD OF TRADE', 'E : NYSE LIFFE EQUITY & INDEX DERIVATIVES LEVEL 1', 'E : ITALIAN STOCK EXCHANGE LEVEL 1', 'P : DS Realtime Mkt/Credit Risk App Server Perm', 'E : BME SPANISH EXCHANGE DERIVATIVES LEVEL 1', 'E : NASDAQ OMX NORDIC DERIVATIVES', 'P : DS Realtime Inst Pricing Application Server Perm', 'E : EURONEXT CASH BBO1', 'E : BME SPANISH EXCHANGE DERIVATIVES L1 L2', 'E : EURONEXT EQUITY & INDEX DERIVATIVES', 'E : ICE FUTURES EUROPE - FINANCIALS', 'P : Money 3000', 'E : CEF ULTRA EUREX LEVEL 1', 'Others'],
    [1385856000000, 0, 1822078, 1787884, 1526264, 709091, 303536, 243997, 243357, 205331, 111680, 78141, 0, 0, 0, 0, 0, 0, 872052],
    [1388534400000, , 64678, 2254840, 1791842, 0, 294130, 261612, 265250, 202797, 120791, 93835, 72261, , 0, 0, 0, 0, 892119],
    [1391212800000, , 64601, 1778993, 1874264, 50263, 278432, 259948, 251868, 204115, 121866, 80318, 0, 0, 0, 0, 0, 0, 808084],
    [1393632000000, , 64954, 272964, 1928547, 49165, 297866, 281369, 267520, 205982, 129011, 80094, 0, 0, 0, 0, 0, 0, 821134],
    [1396310400000, , 65895, 0, 1574445, 48589, 246093, 259781, 267735, 145871, 113000, 81788, 0, 57414, 0, 0, 0, 0, 793854],
    [1398902400000, , 64806, 0, 1629593, 0, 216558, 268116, 260997, 154430, 108396, 80948, 0, 0, 157934, 102192, 0, 0, 863559],
    [1401580800000, , 67250, 0, 1621575, 0, 0, 292013, 282512, 163403, 112910, 240002, 0, 64505, 164273, 108028, 0, 0, 750363],
    [1404172800000, , 64363, 0, 1805757, 0, 0, 254130, 268304, 195180, 107872, 267645, 0, 60165, 157910, 104493, 0, 0, 730116],
    [1406851200000, , 158653, 0, 1599052, 0, 0, 214306, 301959, 189304, 134667, 266021, 0, 56532, 155082, 100397, 0, 0, 701649],
   ...