JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top brandon-grotesque-bold">
           <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              
             
              <a class="navbar-brand nav-title-logo" href="http://dev.shopious.com/">  </a>
             
           </div>
          
          <div class="navbar-collapse in" id="navbar-collapse" style="height: auto;">
             <ul class="nav navbar-nav navbar-left">
                  <li>
                      <a href="/">
                       Home 
                      </a>
                  </li>
                  <li>
                    <a href="/tentang-kami">
                     Apaan sih ni?
                    </a>
                  </li>
                  <li>
                    <a href="/cara-bergabung">
                     Mau gabung?
                    </a>
                  </li>
                  <li>
                    <a href="/faq">
                      Faq 
                    </a>
                  </li><li>
                    <a href="/contact">
                       Contact Us 
                    </a>
                  </li>
             </ul>

             <ul id="registerCart" class="nav navbar-nav navbar-right">
	
        <li>
    		<a href="#" class="popup register">Register</a>
        </li>
        <li class="divider-vertical"></li>
        <li>
        	<a href="#" class="popup signin">Login</a>
        </li>
  	
</ul>
          </div>
    
  </div>

CSS

.navbar-default {
    height: 44px;
    background-color: #e06b55;
}

.nav-collapse > .nav:first-child {
    left: 135px;
}

.navbar-header {
    height: 100%;
}

.navbar .navbar-inner {
    background-color: rgb(224,107,085);
    background-image: none;
    border: 0;
    max-height: 50px;
}

.navbar .btn-navbar {
    background: none;
    border: none;
    box-shadow: none;
}

.navbar .btn-navbar:hover {
    background: rgba(134,030,023,0.5);
}

.nav-collapse.in.collapse {
    background-color: rgb(224,107,085);
    width: 180px;
    float: right;
    z-index: 2;
}

.nav-collapse.in.collapse .nav {
    padding: 0px;
}

.navbar .nav .active a {
    color: white;   
}

.navbar #mobile-wrapper .username a {
    color: white;
}

.navbar .navbar-inner .nav-title-logo {
    left: 0;
    position: absolute;
}

.navba .navbar-inner ul.nav.pull-right {
    height: 40px;
    padding: 10px 0px 0 0;
    background-color: rgb(192,084,064);
    margin-right: 100px;
}

.navbar .navbar-inner .dropdown-menu li {
    width: 100%;
}

.navbar .navbar-inner td:last-child {
}

.navbar .navbar-inner td .magnifying-glass {
    margin: 10px 0 0 0;
    float: left;
}

.navbar .navbar-inner td a {
    padding: 0;
}

.navbar ul.nav.pull-right:first-child a {
    background: url('../bundles/shopiousmain/img/bg-nav-divider.png') no-repeat left 5px;
}

.navbar .container {
    width: 100%;
}


.navbar .img-circle {
    height: 22px;
    width: 22px;
}

.navbar .user-first-name {
    color: white;
    vertical-align: middle;
}

.navbar .nav li.dropdown > .dropdown-toggle .caret {
    border-top-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    margin-top: -3px;
}


.navbar .nav>.active>a
{
    font-family: 'BrandoGrotesqueBold', Arial, Helvetica, sans-serif;
    color: #fdf9ef;
}

.navbar .divider-vertical {
    border-right: 1px solid rgba(216, 213, 208, .6);
    border-left: 1px solid rgba(252, 251, 247, .6);
    height: 40px;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar...