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>

<P>
</P>
</P>
<nav class="navbar ui-app-grid-buttons no-border-radius">
<div class="container-fluid">
<div class="navbar-inner">
  <ul class="nav navbar-nav navbar-left">
    <li>
      <button class="btn btn-default " title=""><i class="fa fa-refresh"></i>
        <!-- react-text: 9 -->
        <!-- /react-text -->
      </button>
      <!-- react-text: 10 -->&nbsp;
      <!-- /react-text -->
    </li>
    <li>
      <div class="btn-group">
        <button class="btn btn-default " title=""><i class="fa fa-filter" style="margin-right: 4px;"></i>
          <!-- react-text: 15 -->Filters
          <!-- /react-text --><span class="badge bg-primary" style="margin-left: 4px;">1</span></button>
        <button class="btn btn-default " title=""><i class="fa fa-remove"></i>
          <!-- react-text: 19 -->
          <!-- /react-text -->
        </button>
      </div>
      <!-- react-text: 20 -->&nbsp;
      <!-- /react-text -->
    </li>
    <li>
      <button class="btn btn-default " title=""><i class="fa fa-columns" style="margin-right: 4px;"></i>
        <!-- react-text: 24 -->Columns
        <!-- /react-text --><span class="badge bg-primary" style="margin-left: 4px;">5</span></button>
      <!-- react-text: 26 -->&nbsp;
      <!-- /react-text -->
    </li>
    <li style="width:200px">
      <div class="input-group">
        <input...

CSS

.fa {
  color: lightgray
}

.nav > li > a.bg-primary {
  color: #fff
}

.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
  }

JavaScript

$('button').tooltip();