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-fluid mini-nav">
  <br>
  <h4>
   Default State
  </h4>

  <nav class="navbar navbar-default">
    <div class="container-fluid ">
      <div class="row">
        <div class="col-xs-10 col-sm-10 col-md-11">
          <ul class="nav navbar-nav navbar-left">
            <li>
              <button class="btn btn-link" type="button"><i class="fa fa-arrow-left fa-none" title="Restore Default"></i></button>
            </li>
            <li>
              <button class="btn btn-link" type="button"> <i class="fa fa-refresh" title="Refresh Data"></i></button>
            </li>
            <li class="hidden-xs col-sm-3 col-md-4 col-lg-5 ">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for..." value=""><span class="input-group-btn"><button class="btn btn-default " title=""><i class="fa fa-search" title="Search Grid"></i><span class="hidden-sm hidden-xs"></span></button>
                </span>
              </div>
            </li>
            <li class="visible-xs ">
              <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#searchBox" aria-expanded="false" aria-controls="searchBox">
                <i class="fa fa-search" title="Search Grid"></i></button>

            </li>
           ...

CSS

body {}

.btn-autosave {
  /* 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, .btn-link.btn-primary .fa, .btn-primary .visible-lg-inline {
  color: rgb(0, 154, 244);
}

.btn-autosave *,
.btn-autosave .btn:hover {
  text-decoration: none;
}

.btn-autosave button {
  background-color: transparent;
}

.btn-autosave nav {
  padding-top: 5px;
}

.btn-autosave .tooltip {
  white-space: no-wrap;
  width: 200px;
}

.btn-autosave .media-controls {
  margin-left: 20%;
}

.btn-autosave .switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 17px;
  vertical-align: text-top;
  margin-bottom:0;
}

.btn-autosave .switch input {
  display: none;
}

.btn-autosave .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.btn-autosave .slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 4px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.btn-autosave input:checked + .slider,
.badge,
.btn-block {
  background-color: #2196F3;
}

.btn-autosave input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

.btn-autosave input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

.btn-autosave .slider.round {
  border-radius: 17px;
}

.btn-autosave .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;
}

.navbar-default .btn-link {
  color:...