JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<body>
    <div id="page">
        <header id="header">
            <nav class="navbar navbar-default roboto normal" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-elements"> <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="navigation-elements">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">START</a>
                            </li>
                            <li><a href="#">THESE</a>
                            </li>
                            <li><a href="#">ARE</a>
                            </li>
                            <li><a href="#">SOME</a>
                            </li>
                            <li><a href="#">ELEMENTS</a>
                            </li>
                            <li><a href="#">WITH</a>
                            </li>
                            <li><a href="#">DIFFERENT</a>
                            </li>
                            <li><a href="#">WIDTHS</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div class="clear"></div>
        </header>
    </div>
</body>

CSS

/* <------------------------- MY CUSTOM CSS -------------------------> */

 @media (min-width: 640px) { /* 768px */
    .navbar {
        border-radius: 0px; /* 4px */
    }
}
@media (min-width: 640px) { /* 768px */
    .navbar-collapse {
        width: auto;
        border-top: 0;
        box-shadow: none;
    }
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    .navbar-collapse.in {
        overflow-y: visible;
    }
    .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
    }
}
@media (min-width: 640px) { /* 768px */
    .navbar-nav {
        float: none;
        display:table;
        width:100%;
        margin: 0;
    }
    .navbar-nav > li {
        float: none;
        display:table-cell;
        text-align:center;
    }
    .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .navbar-nav.navbar-right:last-child {
        margin-right: -15px;
    }
}
@media (min-width: 640px) { /* 768px */
    .navbar-toggle {
        display: none;
    }
}
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin-left: 0px; /* -15px */
    margin-right: 0px; /* -15px */
}
.container-fluid {
    padding-left: 0px; /* 15px */
    padding-right: 0px; /* 15px */
}
.nav > li > a {
    padding-left: 5px; /* 15px */
    padding-right: 5px; /* 15px */
}
.navbar {
    border: none; /* 1px solid transparent */
    margin-bottom: 0px; /* 20px */
}
.navbar-collapse {
    max-height: none; /* 340px; */
    padding-left: 0px; /* 15px */
    padding-right: 0px; /* 15px */
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #fff; /* #e7e7e7 */
}
.navbar-default .navbar-nav > li > a {
    color: #fff;...