JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav-wrapper">
    <div id="nav" class="navbar navbar-inverse affix-top center" data-spy="affix">
        <div class="navbar-inner" data-spy="affix-top">
            <div class="container">
                <!-- .btn-navbar is used as the toggle for collapsed navbar content --> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>

                <!-- Everything you want hidden at 940px or less, place
                within here -->
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li><a href="#home">Home</a>

                        </li>
                        <li><a href="#service-top">Services</a>

                        </li>
                        <li><a href="#contact">Contact</a>

                        </li>
                    </ul>
                    <!--/.nav-->
                </div>
                <!--/.nav-collapse collapse pull-right-->
            </div>
            <!--/.container-->
        </div>
        <!--/.navbar-inner-->
    </div>
    <!--/#nav /.navbar navbar-inverse-->
</div>
<!--/#nav-wrapper-->

CSS

.navbar {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding:0;
    z-index:999;
    margin-bottom:0;
}
.navbar.navbar-inverse .navbar-inner {
    background: #390 url(../img/green-bg.png) repeat;
    border:none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin-bottom:0;
}
.navbar .nav, .navbar .nav > li {
    float:center;
    display:inline-block;
    *display:inline;
    /* ie7 fix */
    *zoom:1;
    /* hasLayout ie7 trigger */
    vertical-align: top;
    padding:0 10px;
    margin:0 auto;
}
.navbar .nav > li a {
    color:white;
    background:rgba(0, 0, 0, 0.2);
    text-shadow:none;
    font-size:1.5em;
    font-family: marvel, serif;
    padding:.5em 1em;
    margin:.5em 1em;
    min-width:90px;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
    color:#FFF;
    background: #390 url(../img/green-bg.png) repeat;
    text-shadow:none;
    font-size:1.5em;
    font-family: marvel, serif;
    padding:.5em 1em;
    margin:.5em 1em;
    -webkit-box-shadow: inset 0 0 10px #000;
    -moz-box-shadow: inset 0 0 10px #000;
    box-shadow: inset 0 0 10px #000;
}
.navbar .nav > li {
    padding:1em;
    margin:0;
    width:10em;
}
#nav.affix, #nav.affix-bottom {
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0px 2px 4px #000;
    -moz-box-shadow: 0px 2px 4px #000;
    box-shadow: 0px 2px 4px #000;
}
#nav {
    position:relative;
    z-index:999;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}
.center.navbar .nav, .center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline;
    /* ie7 fix */
    *zoom:1;
    /* hasLayout ie7 trigger */
    vertical-align: top;
}
.center .navbar-inner {
    text-align:center;
}