JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="./">aaaaaaaa <span class="sr-only">(current)</span></a></li>
        <li><a href="#">bbbbbbb</a></li>
        <li><a href="#">ccccccc</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS

.navbar-nav {
      margin-top: 0;
    }
    
    .navbar li a {
      text-transform: uppercase;
    }
    
    @media(min-width: 768px) {
      .navbar li a {
        padding: 20px 40px 20px 40px;
      }
    }
    
    .navbar li.active a {
      background-color: rgb(255, 165, 0) !important;
      color: snow !important;
    }