JSFiddle - React, Tailwind, and code Playground

by idleberg

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <ul class="nav navbar-nav navbar-left">
      <li>
        <ul class="breadcrumb list-inline">
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group has-feedback">
            <label class="control-label sr-only" for="search">Search</label>
            <input type="text" class="form-control" id="search" placeholder="Search">
          <i class="fa fa-search form-control-feedback"></i>
         </div>
         </form>
    </ul>
  </div>
</nav>

CSS

@media (min-width: 768px) {
  .nav .breadcrumb {
    float: left;
    margin: 7px 10px;
  }
}