JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css&quot; integrity=&quot;sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==&quot; crossorigin=&quot;anonymous&quot;&gt;"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<header role="banner">
		<nav id="navbar-primary" class="navbar" role="navigation">
		  <div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
		        <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 class="collapse navbar-collapse" id="navbar-primary-collapse">
		      <ul class="nav navbar-nav nav-links">
		        <li class="active"><a href="#">Home</a></li>
		        <li><a href="#">Menu</a></li>
		        <li><a href="#">About</a></li>
		        <li><a href="#">Contact</a></li>
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
	</header><!-- header role="banner" -->

CSS

header, footer {
	background-color: #EF92A5;
}

header a, footer p {
	color: #fff;
}

/* Bootstrap Stuff */

#navbar-primary .navbar-nav {
  width: 100%;
  text-align: center;
}
#navbar-primary .navbar-nav > li {
  display: inline-block;
  float: none;
}
#navbar-primary .navbar-nav > li > a {
  padding-left: 30px;
  padding-right: 30px;
}

nav a:link, nav a:visited, nav a:active { color: white; }
nav a:hover { color: purple; }
nav a.active { background-color: red; }

/* help me please */