JSFiddle - React, Tailwind, and code Playground

by victorxpp

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="loading-icon">
    <div class="rect rect1"></div>
    <div class="rect rect2"></div>
    <div class="rect rect3"></div>
</div>
       <div id="dashboard">

        <div class="sortholder">
            <div id="control2"></div>
           <div id="control3"></div>
           <div id="control5"></div>
          
      </div>
       <div id="control4"></div>
<div class="nowrap">

 <div class="inliner" id="labels"></div>
  <div class="inline scroll">
<div id="header"></div>
  <div id="chart"></div>
  </div>
 </div>
  </div>

CSS

#header {
  height: 65px;
  position: relative;
  -webkit-overflow-scrolling: touch;
  display: block;
  top: 0px;
  margin-top: 0px;
 overflow-x: auto;
  overflow-y: hidden;
}


#chart {
  -webkit-overflow-scrolling: touch;
  margin-top: 0px;
  height: 100%;
  float:bottom;
   display: block;
 overflow-x: auto;
  overflow-y: scroll;
   padding-bottom: 10vh;
}

.sortholder {
 display: flex;
    justify-content: space-between;
}

	html, body {
            height: 100%;
            margin: 0;
            width: 100%;
        }

#dashboard {
min-width: 100vh;
}

.goog-menu {
max-height: 50vh;
max-width: 50vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

.google-visualization-controls-rangefilter {
  position: relative;
  display: list-item; /* Ignored by FF3 and later. */
  display: inline-block;
  right: 50%;
  top: 5px;
}

#control4 {
margin-left: 50%;
text-align: center;
}


.ggl-tooltip {
  border: 2px solid #E0E0E0;
  font-family: Arial;
  padding: 8px 8px 8px 8px;
  position: relative;
  z-index: +9999;
}

.ggl-tooltip span {
  font-weight: normal;
    z-index: 9999;
}

.ggl-tooltip:hover span {
  font-weight: normal;
   display: block;
   position: fixed;
     z-index: 9999;
}

.g {
 z-index: 0;
  font-size: 5px;
}

.last-child {
  font-size: 5px;
  font-weight: bold;
}

.google-visualization-tooltip {
  position: inherit;
  margin-top: 0px !important;
  z-index: 9999;
}

#labels {
  border: 1px solid #b7b7b7;
  margin-top: 64.5px;
  padding-bottom: 5vh;
  display: inline-block;
   direction: rtl;
}

.label {
  border-top: 1px solid #b7b7b7;
  font-family: Arial;
  font-size: 13px;
  text-align: right;
  padding-left: 8px;
  padding-right: 8px;
}

.label:first-child {
  border: none;
}

.label:nth-child(even) {
	background-color: #e6e6e6;
}

.label:nth-child(odd) {
	background-color: #ffffff;
}

.scroll {
  width: 100%;
 overflow-x: auto;
  overflow-y: hidden;
   padding-bottom: 15vh;
   display: inline-block;
    height: 100vh;
    ...

JavaScript

google.charts.load('current', {
  packages:['timeline']
}).then(function () {
  var data = new google.visualization.DataTable({
    cols: [
      {id: 'team', label: 'Team', type: 'string'},
      {id: 'start', label: 'Season Start Date', type: 'date'},
      {id: 'end', label: 'Season End Date', type: 'date'}
    ],
    rows: [
      {c: [{v: 'Baltimore Ravens'},     {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
      {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
      {c: [{v: 'Indianapolis Colts'},   {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]},
      {c: [{v: 'New York Giants'},      {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
      {c: [{v: 'New Orleans Saints'},   {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
      {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
          {c: [{v: 'New York Giants'},      {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
     ...