JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a>
    </li>
    <li><a href="skillset.html">Skillset</a>
    </li>
    <li><a href="history.html">Work History</a>
    </li>
    <li><a href="about.html">About</a>
    </li>
    <li><a href="contact.html">Contact</a>
    </li>
</ul>
<div style="height: 4000px; background-color: red;"></div>

CSS

.header-wrapper {
    font-family:'Oswald', sans-serif;
}
.top {
    background-color: #2960f7;
    margin: 0;
    padding: 5em 0 4em 0;
    width: 100%;
    position: fixed;
    z-index: 999;
}
.top h1 {
    text-transform: uppercase;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
    color: #fff;
}
.nav .nav-tabs {
    border-bottom: none;
}
.nav-tabs {
    position: fixed;
    top: 124px;
    background-color: #2960f7;
    color: #fff;
    border-color: #fff;
    z-index: 1000;
}
.nav-tabs .active {
    color: #2960f7;
}
.nav-tabs li a:hover {
    background-color: #fff;
    color: #2960f7;
}
.nav-tabs li, .nav-tabs li a {
    color: #fff;
}