JSFiddle - React, Tailwind, and code Playground

by Niranjan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/bootstrap-slider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/css/bootstrap-slider.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/3.0.0/plottable.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/3.0.0/plottable.min.css">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
    <div class="navbar-brand" style="text-align:center;">
      <span class="glyphicon glyphicon-menu-hamburger"></span></div>
    </div>
    <ul class="nav navbar-nav">
    <li><a href="#"><span style="color: white;">Asset Strategy</span></a></li>
    </ul>
  </div>
</nav>

<div class="container" style="width:85%;">
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
        <div data-toggle="collapse" href="#collapse1">
        <span class="glyphicon glyphicon-menu-hamburger"></span> <span class="filterPane-subheader">Filter: <span style="color:white;">Poles</span><span style="float:right"><span style="color:white;">Showing 10,005 Poles</span></span></span></div>
      ...

CSS

th {
  color: #80dfff;
}

.container-fluid {
  background-color: #031e37;
}

.container-fluid > .navbar-nav {
  background-color: #031e37;
}

.container-fluid > .navbar-header {
  background-color: #d3d2d3;
}

.panel-default > .panel-heading {
  background-color: #031e37;
  color: white;
}

.panel-body {
  background-color: #031e37;
  color: white;
}

.glyphicon-menu-hamburger {
  color: white;
}
.table-responsive>.fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
}

#ageSelectorSlider .slider-handle {
  background: white;
}
#ageSelectorSlider .slider-track {
  height: 2px;
}

#filterDiv > .btn-default {
  background:transparent;
}

.filterPane-subheader {
  font-size: 14px;
	line-height: 2.86;
	color: #0e75b7;
}

#betterTable td, #betterTable th {
    border: none;
}

.dropdown-toggle {
  border-color: white;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
}

span + span {
  margin-left: 10px;
}

.navbar {
  background: #d3d2d3;
  border: none;
}

.circleVal {
  background: red;
   border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: normal;
  line-height: 1.6em;
  text-align: center;
  width: 1.6em;  
}

@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

JavaScript

var age = $("#ageSelector").slider();
age.on('slide',function() {
  var input, filter, table, tr, td, i;
  filter = age[0].value.split(',');
  table = document.getElementById("betterTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[2];
    if (td) {
      if (parseInt(td.innerHTML) >= parseInt(filter[0]) && parseInt(td.innerHTML) <= parseInt(filter[1])) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
});

var data = [
     { health: 1, age: 1 },
     { health: 2, age: 3 },
     { health: 3, age: 2 },
     { health: 4, age: 4 },
     { health: 5, age: 3 },
     { health: 6, age: 5 }
    ];
    var dataSet = new Plottable.Dataset(data, { name: "Test Scores" });
    var plot = new Plottable.Plots.Line();
    plot.addDataset(dataSet);
    var xAccessor = function(datum, index, dataset) {
      return datum.health;
    };
    var xScale = new Plottable.Scales.Category();
    plot.x(xAccessor, xScale);
    var yScale = new Plottable.Scales.Linear();
    var yAccessor = function(datum, index, dataset) {
      return datum.age;
    };
    plot.y(yAccessor, yScale);
    plot.renderTo("div#polesPlot");

/*$("#filterInput").keyup(function() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("filterInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("betterTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
});*/