JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<div id="container">
<div id="body">
<center>
    <ul class="navbar">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="biography.html">Biography</a></li>
    </ul>
    </center>
</div>    
</div>

CSS

@charset "utf-8";


#container {
    margin-left:auto;
    margin-right:auto;
    width:960px;
    background-color:#666666;
}

#body {
    background-color:#666666;
    width:960px;
    height:500px;
    border:2px solid #FFFFFF;
    margin-top:50px auto;
}

.navbar {
    position:absolute;
    list-style:none;
    border-bottom:none;
    left:40px;
    right:90px;
}

ul.navbar li {
    float:left;
    margin-left:0px;
    width:20%;
}

ul.navbar a {
    background-color:#66FF33;
    width:100%;
    display: block;
    padding:5px;
    text-decoration:none;
    color:#
}

ul.navbar a:hover {
    width:100%;
    margin:0px;
    background-color:#33FFD7;
    padding:5px;
    display: block;
}

body {
    background-color:#333333;
}