JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.css">
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
<div class="container">
<br/>
<br/>
<br/>


<div id="linegraph01" class="ybx-line-graph">
  <nav class="navbar navbar-inverse">
  <div class="container-fluid">
  <div class="navbar-header">
          <button class="btn btn-link" id="daterange" type="button" data-toggle="dropdown" class="dropdown-toggle">Select <i class="fa fa-clock-o"></i></button>
  </div>
<ul class="nav navbar-nav navbar-left">
      <li>
        <div class="btn-group">
          <button class="btn btn-link"  data-toggle="tooltip" data-placement="bottom" title="Zoom Out"><i class="fa fa-search-minus"></i></button>
          <button class="btn btn-link"   data-toggle="tooltip" data-placement="bottom"  title="Zoom In"><i class="fa fa-search-plus"></i>
          </button>
        </div>
      </li>
    </ul>
    <div class='btn-group media-controls'>
      <button class="btn ybx-timelinecontrols-media ui-timelinecontrols-disable"  data-toggle="tooltip" data-placement="bottom"  title="Rewind"><i class="fa fa-backward"></i></button>
      <button class="btn   ybx-timelinecontrols-media ui-timelinecontrols-disable"  data-toggle="tooltip" data-placement="bottom"  title="Play"><i class="fa fa-play"></i></button>
      <button class="btn    ybx-timelinecontrols-media ui-timelinecontrols-disable"  data-toggle="tooltip" data-placement="bottom" ...

CSS

body {
   background-color: rgb(0,16,25);
}.ybx-line-graph {
  /* The switch - the box around the slider */
  /* Hide default HTML checkbox */
  /* The slider */
  /* Rounded sliders */
}
.ybx-line-graph *, .ybx-line-graph .btn:hover {
  text-decoration: none;
}
.ybx-line-graph button {
  background-color: transparent;
}
.ybx-line-graph .btn .fa {
  color: rgba(255, 255, 255, 0.7);
}
.ybx-line-graph .btn-link:hover .fa {
  color: #fff;
}
.ybx-line-graph .btn-primary .fa {
  color: white;
}
.ybx-line-graph nav {
  padding-top: 5px;
}
.ybx-line-graph .tooltip {
  white-space: no-wrap;
  width: 200px;
}
.ybx-line-graph .navbar-inverse {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid transparent;
}
.ybx-line-graph .media-controls {
  margin-left: 20%;
}
.ybx-line-graph .switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 17px;
  vertical-align: text-top;
}
.ybx-line-graph .switch input {
  display: none;
}
.ybx-line-graph .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.ybx-line-graph .slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 4px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
.ybx-line-graph input:checked + .slider {
  background-color: #2196F3;
}
.ybx-line-graph input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
.ybx-line-graph input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}
.ybx-line-graph .slider.round {
  border-radius: 17px;
}
.ybx-line-graph .slider.round:before {
  border-radius: 50%;
}

JavaScript

$(document).ready(function(){
      $('[data-toggle="tooltip"]').tooltip(); 
      $('#daterange').daterangepicker();
      $('.ui-timelinecontrols-disable').click( function(){
          $(this).parent().find('.btn').removeClass('btn-primary')
      		$(this).toggleClass('btn-primary','btn-link');
      
      })
      
});