JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<h3>
Tool Bar Buttons
</h3>
<nav class="navbar navbar-default ui-app-grid-buttons no-border-radius">
<div class="navbar-inner">
    <ul class="nav navbar-nav navbar-left">
    <li>
      <button class="btn btn-default " data-toggle="tooltip" data-placement="top" title="Refresh"><i class="fa fa-refresh"></i>
 <span class="badge bg-primary" style="margin-left: 4px;">1</span>      </button>
    </li>
    <li>
        <button class="btn btn-default " data-toggle="tooltip" data-placement="top" title="Filters"><i class="fa fa-filter" style="margin-right: 4px;"></i>
<span class="hidden-xs">Filters</span>
 <span class="badge bg-primary" style="margin-left: 4px;">1</span></button>
   
    </li>
    <li>
      <button class="btn btn-default " data-toggle="tooltip" data-placement="top" title="Columns"><i class="fa fa-columns" style="margin-right: 4px;"></i>
      <span class="hidden-xs">   Columns</span>
<span class="badge bg-primary" style="margin-left: 4px;">5</span></button>
    </li>
    
<div class="btn-group" style="padding-bottom:none"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle="tooltip" data-placement="top" title="Add New">
<i class="fa fa-plus"></i>    <span class="hidden-xs">New</span> <span class="caret"></span>
  </button>
               ...

CSS

.fa {
  color: lightgray
}

.nav > li > a.bg-primary {
  color: #fff
}
.navbar-default {
  padding:10px 5px;
  border-radius:0;
  }
}

.nav > li > a:hover.bg-primary {
  background-color: #000;
  color: #fff
}

.subnav-fixed-top {
  position: absolute;
  top: 50px;
  width: 100%;
  border-radius: 0
}
.ui-app-toolbar-search {
  width:200px
  }

.tooltip {
  width:160px!important
  }
li {margin-right:5px}

JavaScript

$('.navbar-responsive button').tooltip();