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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.7.0/EQCSS.min.js"></script>
Nav Bar with Element Queries
<div class="container-fluid">
  <br>
  <br>
  <br>
  <div id="linegraph01" class="ybx-line-graph">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <ul class="nav navbar-nav navbar-left">

          <li>
            <button class="btn btn-link" id="daterange" type="button" data-toggle="dropdown"> <i class="fa fa-refresh" title="Refresh"></i></button>
          </li>

          <li class="divider"></li>
          <li>
            <button class="btn btn-link" data-toggle="tooltip" data-placement="bottom" title="Zoom Out"><i class="fa fa-filter"></i><span class="hidden-xs"> Filters <span class="badge">
          6 </span></span>
            </button>
          </li>
          <li>
            <button class="btn btn-link" data-toggle="tooltip" data-placement="bottom" title="Zoom Out"><i class="fa fa-columns"></i> Columns <span class="badge">12</span></button>
          </li>
          <li>
            <button class="btn btn-link" data-toggle="tooltip" data-placement="bottom" title="Zoom Out"><i class="fa fa-binoculars"></i> Views
            </button>
          </li>
          <li>
            <button class="btn btn-link" data-toggle="tooltip"...

CSS

body {}

.ybx-line-graph {
  /* The switch - the box around the slider */
  /* Hide default HTML checkbox */
  /* The slider */
  /* Rounded sliders */
}

.navbar-header {
  margin-left: -15px !important;
}

.btn-autosave .btn-primary {
  color: rgb(0, 154, 244);
}

.ybx-line-graph *,
.ybx-line-graph .btn:hover {
  text-decoration: none;
}

.ybx-line-graph button {
  background-color: transparent;
}

.ybx-line-graph nav {
  padding-top: 5px;
}

.ybx-line-graph .tooltip {
  white-space: no-wrap;
  width: 200px;
}

.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,
.badge,
.btn-block {
  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%;
}

.mini-nav .navbar-nav {
  margin: 7.5px -15px;
}

.no-padding {
  padding-right: 0;
  padding-left: 0;
}

.btn-end {
  margin-right: -15px;
}

.btn-end .btn {
  margin-right: -15px;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  min-height:50px;
}


.nav > li {
     float: left !important; 
}


@element nav (min-width:200px) and (max-width: 650px) {
   {
    display:none;
  }
}