JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse container-fluid">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#yo">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="navbar-inner visible-xs">
        <div class="nav-center">
         <a href="/" ><span class="App_logo_plus">!</span><span class="App_logo">trololo</span></a>
        </div>
      </div>

    </div>


    <div class="collapse navbar-collapse" id="yo">

          <div class="pull-left ">
            <button type="button" class="navbar-toggle-always collapsed" data-toggle="collapse" data-target="#left" aria-expanded="false" aria-controls="navbar">
              <span class="icon-bar-always"></span>
              <span class="icon-bar-always"></span>
              <span class="icon-bar-always"></span>
            </button>
          </div>


      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search">
            <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
          </div>
        </div>
      </form>
      <div class="navbar-inner hidden-xs">
        <div class="nav-center">
         <a href="/" ><span class="App_logo_plus">!</span><span class="App_logo">trololo</span></a>
        </div>
      </div>

    </div>

    <div class="collapse" id="left" style="position:absolute;z-index:100">
      <ul class="nav nav-tabs">
          <li<a href="#">a</a></li>
          <li><a href="#">b</a></li>
          <li><a href="#">c</a></li>
          <li><a href="#">d</a></li>
      </ul>
    </div>

  </div>
</nav>

CSS

body {
  min-height: 2000px;
  padding-top: 70px;
}
.navbar-inverse .navbar-toggle-always {
  border-color: #333333;
}
.navbar-inverse .navbar-toggle-always:hover,
.navbar-inverse .navbar-toggle-always:focus {
  background-color: #333333;
}
.navbar-inverse .navbar-toggle-always .icon-bar-always {
  background-color: #ffffff;
}
.navbar-toggle-always {
  position: relative;
  float: right;
  margin-right: 15px;
  padding: 9px 10px;
  margin-top: 8px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  margin-left: 0;
  margin-right: 0;
}
.navbar-toggle-always:focus {
  outline: 0;
}
.navbar-toggle-always .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}
.navbar-toggle-always .icon-bar + .icon-bar {
  margin-top: 4px;
}
@media (min-width: 768px) {
  .navbar-toggle-always {
    display: none;
  }
}
@media (min-width: 768px) {
  .navbar-toggle-always {
    display: block!important;
    background-color: transparent;
    border: 1px solid #333333;
  }
}
.navbar-toggle-always .icon-bar-always {
  width: 22px;
  height: 2px;
  border: 1px solid #fff;
  display: block;
  border-radius: 1px;
}
.navbar-toggle-always .icon-bar-always + .icon-bar-always {
  margin-top: 4px;
}
.App_logo {
  color: #6C71C4;
  font-size: 29px;
  font-family: 'Days One', sans-serif;
  z-index: 2000000;
}
.App_logo_plus {
  color: #f1f1f1;
  font-family: 'verdana', sans-serif;
  font-size: 23px;
  z-index: 2000000;
}
/* Globals */
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.white {
  background-color: #ffffff !important;
}
.red {
  background-color: #db2027;
  color: #ffffff;
}
.green {
  background-color: #5cb85c;
  color: #ffffff;
}
.orange {
  background-color: #f0ad4e;
  color: #ffffff;
}
.text-red {
  color: #db2027;
}
.gold {
  color: #ffd700 !important;
}
.gray {
  color: #d5d5d5;
}
.clear {
  clear: both;
}
.caption {
  padding:...