JSFiddle - React, Tailwind, and code Playground

by Oliver Houston

HTML

<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" crossorigin="anonymous"></script>

<body>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Data</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" id="defaultInput" value="default" href="#">data1.json</a>
        <a class="dropdown-item" id="updateInput" value="post" href="#">data2.json</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div id="race_graph">
        </div>
      </div>
    </div>
  </div>

  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    // set the dimensions and margins of the graph
    var margin = {
        top: 70,
        right: 50,
        bottom: 100,
        left: 80
      },
      width = 1400 - margin.left - margin.right,
      height = 600 - margin.top - margin.bottom;

    //******************* - START DATA SETUP- ********************
    var parseTime = d3.timeParse("%M:%S");
    var timeformat = d3.timeFormat("%M:%S");

    //******************* - START RANGE SETUP - *****************

    // set the domains and ranges
    var x = d3.scaleBand()
      .range([0, width])
      .padding([0.2]);

    //...

CSS

.container {
    margin-left: 0px;
  }

  .legend:hover {
    fill: blue;
  }
  /* tooltip for main bar chart */

  div.maintooltip {
    position: absolute;
    text-align: left;
    width: 120px;
    height: 20px;
    padding: 2px;
    font: 12px sans-serif;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
  }
  /* tooltip for clubs bar chart */

  div.clubtooltip {
    position: absolute;
    text-align: left;
    width: 120px;
    height: 140px;
    padding: 2px;
    font: 12px sans-serif;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
  }
  /*rect:hover {
    fill: blue;
  }*/