JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="Menu">
  <nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-  toggle="collapse" data-target="#navbar">
          <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-left" href="http://www.website.com"> <img src="Logo.png" alt="LOGO">
        </a>
      </div>
      <div id="navbar3" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
</div>

CSS

.navbar-inverse .navbar-nav>.active>a{
  background-color:red
}

.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover{
  color:red
}
#navbar3 .navbar-nav>.open>a, #navbar3 .navbar-nav>.open>a:focus, #navbar3 .navbar-nav>.open>a:hover{
   background-color:red
}

navbar-right{
    padding-top: 35px;
}


img {
    padding-top: 17px;
    padding-left: 17px;
}

.jumbotron {
    padding-top: 10px;
    padding-bottom: 48px;
    border: 2px solid black;
}

.navbar-inverse .navbar-nav > li > a {
    color: green;
} 

.navbar3 > .navbar-nav .navbar-right>.active {
    color:red;
    background-color:yellow;

}
.navbar3 > .navbar-nav .navbar-right>.active > a,
.navbar3 > .navbar-nav .navbar-right>.active > a:hover,
.navbar3 > .navbar-nav .navbar-right>.active > a:focus{
    color:red;
    background:blue;
}