JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
   <div class="container">
       <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-nav-collapse" aria-expanded="false">
        <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" href="#">Brand</a>
    </div>
<div class="collapse navbar-collapse" style="padding-right:0px;padding-left:0px;" id="my-nav-collapse">
            <ul class="nav navbar-nav">              
             <li>
                <a href="javascript:void(0);">&gt; Item1 <span class="badge pull-right">1</span></a>
              </li>
              <li>
                <a href="javascript:void(0);">&gt; Item2 <span class="badge">2</span></a>
              </li>
              <li>
                <a href="javascript:void(0);">&gt; Item3 <span class="badge">3</span></a>
              </li>
            </ul>
           
            <ul class="nav navbar-nav navbar-right">
              <li>
                <a href="javascript:void(0);">&gt; Item4 <span class="badge">4</span></a>
              </li>
              <li>
                <a href="javascript:void(0);">&gt; Item5 <span class="badge pull-right">5</span></a>
              </li>
            </ul>
</div>
</div>
</nav>