JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div>

  <div id="container" style = " display: inline-block">

  </div>

  <div id = "filters" style="vertical-align:top; display: inline-block; margin-left: 50px">
    <ul>
      <li>
        Infotype
        <ul>
          <li>
            <input type="checkbox" id="infotype" value='s' checked/>
            <label for="infotype">Infotype S</label>
          </li>
          <li>
            <input type="checkbox" id="infotype" class = 'def' value='a' checked/>
            <label for="moreTen">Infotype A</label>
          </li>
        </ul>
      </li>
      
      <li>
        BU/BD
        <ul>
          <li>
            <input type="checkbox" id="bu" value='srv' checked/>
            <label for="infotype">SRV</label>
          </li>
          <li>
            <input type="checkbox" id="bu" value='mlv' checked/>
            <label for="moreTen">MLV</label>
          </li>
           <li>
            <input type="checkbox" id="bu" value='cbd' checked/>
            <label for="moreTen">CBD</label>
          </li>
          <li>
            <input type="checkbox" id="bu" value='cbu' checked/>
            <label for="moreTen">CBU</label>
          </li>
          <li>
            <input type="checkbox" id="bu" value='smb' checked/>
            <label for="moreTen">SMB</label>
          </li>
          <li>
            <input type="checkbox" id="bu" value='tx' checked/>
            <label for="moreTen">Tx</label>
          </li>
          <li>
            <input type="checkbox" id="bu" value='hw' checked/>
            <label for="moreTen">HW</label>
          </li>
          <li>
            <input type="checkbox" id="bu" value='cloud' checked/>
            <label for="moreTen">Cloud</label>
          </li>
        </ul>
      </li>

    </ul>

  </div>

</div>

CSS

canvas {
  width: 300px;
}


#container{
  display: inline-block;

}
#filters ul {
  list-style: none; 
  margin: 0;
  padding: 0;
}
.topmenu>li {
  display: inline-block;
  margin-right: 20px;
  position: relative;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

JavaScript

var jsonfile = [
  /* ["2", "6\/16\/2017", "ConditionalGo", "S", "SRV"], */
  /* ["5", "6\/16\/2017", "GoProject", "S", "MLV"], */
  /* ["7", "6\/16\/2017", "NoGoNow", "S", "CBU"], */
  /* ["4", "", "idea", "S", "SMB"], */
  /* ["9", "6\/16\/2017", "NoGO", "S", "CBU"], */
  /* ["6", "6\/29\/2017", "ConditionalGo", "S", "MLV"], */
  /* ["1", "6\/16\/2017", "GoProject", "A", "Tx"], */
  /* ["12", "6\/29\/2017", "GoProject", "S", "Tx"], */
  /* ["8", "", "idea", "S", "CBD"], */
  /* ["11", "29\/8\/17 9:00", "GoProject", "S", "SMB"], */
  /* ["10", "", "idea", "S", "Tx"], */
  /* ["13", "29\/8\/17 9:30", "GoProject", "S", "SMB"], */
  /* ["6", "6\/29\/2017", "ConditionalGo", "A", "MLV"], */
  /* ["6", "6\/29\/2017", "ConditionalGo", "A", "MLV"], */
  /* ["6", "6\/29\/2017", "ConditionalGo", "A", "MLV"], */
  /* ["15", "29\/8\/17 10:00", "NoGoNow", "S", "MLV"], */
  /* ["14", "29\/8\/17 10:30", "Closed", "S", "SRV"], */
  /* ["24", "29\/8\/17 11:00", "NoGoNow", "S", "SRV"], */
  /* ["9", "6\/16\/2017", "NoGO", "A", "CBU"], */
  /* ["17", "29\/8\/17 11:30", "NoGo", "S", "CBD"], */
  /* ["20", "29\/8\/17 12:00", "GoProject", "S", "MLV"], */
  /* ["11", "29\/8\/17 9:00", "GoProject", "A", "SMB"], */
  /* ["22", "31\/8\/17 14:00", "GoProject", "S", "CBU"], */
  /* ["17", "", "idea", "S", "Tx"], */
  /* ["13", "29\/8\/17 9:30", "GoProject", "A", "SMB"], */
  /* ["23", "31\/8\/17 14:30", "GoProject", "S", "Tx"], */
  /* ["14", "29\/8\/17 10:30", "NoGoNow", "A", "SRV"], */
  /* ["14", "29\/8\/17 10:30", "NoGoNow", "A", "SRV"], */
  /* ["19", "", "idea", "S", "MLV"], */
  /* ["15", "29\/8\/17 10:00", "NoGoNow", "A", "MLV"], */
  /* ["16", "31\/8\/17 16:00", "ConditionalGo", "A", "MLV"], */
  /* ["16", "31\/8\/17 16:00", "ConditionalGo", "S", "CBU"], */
  /* ["21", "", "idea", "S", "SRV"], */
  ["18", "31\/8\/17 16:30", "NoGo", "S", "HW"],
  /* ["27", "9\/29\/2017", "ConditionalGo", "S", "CBU"], */
  ["18", "31\/8\/17 16:30", "NoGo", "A", "HW"],
  /* ["28", "9\/29\/2017",...