JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top color navigation" role="navigation">
  <div class="container navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header navigation">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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 navigation" href="#">Start Bootstrap</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navigation" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navigation">
        <li class="navigation">
          <a href="#" class="navigation">About</a>
        </li>

        <li>
          <a href="#">Creators</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>

CSS

.navbar-inverse {
  background-color: red;
  border-color: red;
}
.navbar-inverse .navbar-nav>li>a {
    color: white;
}