JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fonts.googleapis.com/css?family=Raleway:400,300,600"></script>
<div id="nav-wrapper">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

CSS

body{
    font-size: 1em;
    font-family: 'Raleway', 'Segoe UI', Helvetica, sans-serif;
    font-weight: 400;
    color: #333;
}
#nav-wrapper{
    padding:2em 0;
    background-color:#ccc;
}
nav{
    width:100%;
    background-color:#eee;
    text-align:center;
}

ul{
    margin:0 auto;
    max-width:800px;
    list-style:none;
}
li{
    display:inline-block;
    /*important part*/
    margin:0 -0.325em;
    /*important part*/
}
li a{
    display:block;
    padding:0.3em 0.8em;
    text-decoration:none;
    font-size:1.5em;
    color:#333;
    transition: all 0.5s ease-in-out;
}


li a:hover{
    background-color:#ca2a26;
    color:#fff;
    transition: all 0.2s ease-in-out;
}