JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<body>
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-content"> <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" id="name">Header Name</a>

            </div>
            <div class="collapse navbar-collapse" id="nav-content">
                <ul class="nav nav-justified">
                    <li class="active"><a href="#">Item1</a>
                    </li>
                    <li><a href="#">Item 2</a>
                    </li>
                    <li><a href="#">Item 3</a>
                    </li>
                    <li><a href="#">Item 4</a>
                    </li>
                    <li><a href="#">Item 5</a>
                    </li>
                </ul>
            </div>
        </nav>
         <h2 id="headlineText"><span class="label label-primary">Content</span></h2>

    </div>
</body>

CSS

body {
    background-color: lightblue;
}
#headline {
    width: 100%;
    display: block;
}
@media (min-width:768px) {
    .nav-justified > li > a {
        background-color: red;
        border-left: 2px solid rgba(255, 255, 255, .75);
        border-right: 2px solid rgba(0, 0, 0, .1);
    }
}
.navbar-toggle {
    background-color: white;
}
#name {
    color: white;
    font-size: x-large;
    font-weight: bold;
}
.navbar-header {
    background-color: #428bca;
    width: 100%;
}
.navbar-default {
    border: none;
    box-shadow: none;
}
#nav-content {
    background-color: white;
    padding-left: 0px;
    padding-right: 0px;
    /*height: 100px !important;*/
}
ul {
    display: block;
}
#headlineText {
    margin-top: 50px;
    margin-bottom: -10px;
}
.nav-justified {
    background-color: white;
    border-radius: 5px;
}
ul li {
    background-color: white;
}
.nav-justified > li {
    background-color: white;
}
.nav-justified > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 0px;
    color: #777;
    font-weight: bold;
    text-align: center;
    background-color: #e5e5e5;
    /* Old browsers */
    background-repeat: repeat-x;
    /* Repeat the gradient */
    background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
    /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e5e5e5));
    /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
    /* Chrome 10+,Safari 5.1+ */
    background-image: -ms-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
    /* IE10+ */
    background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
    /* Opera 11.10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#e5e5e5', GradientType=0);
    /* IE6-9 */
    background-image: linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
    /* W3C */
}
.nav-justified > .active >...