JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li class="current"><a href="/" title="Home" >Home</a></li>
        <li><a href="#" >Services</a></li>
        <li><a href="#" >Experience</a></li>
        <li><a href="#" >About Us</a></li>
        <li><a href="#" >Contact</a></li>
 </ul>

CSS

#nav { margin: 0; padding-top: 0.85em; width: auto; font-family:'Alegreya SC', Georgia, serif; font-size: 1.4em; }
#nav li { margin: 0 0 0.5em 0; display: block; float: left; clear: none; margin-right: 2.5%; background:#d18b5e; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; padding:5px 10px 5px 10px;}
#nav li:last-child { margin-right: 0; }
#nav a { display: block; color: #FFF; text-decoration:none; }
#nav a:hover { color: #484a50; border-bottom-color: #484a50; }
@media only screen and (max-width: 767px) {
    #nav .current{background:#666; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background:none; }
    #nav { margin: 0 6% 0 0; padding: 0; }
    #nav li { margin: 0; display: block; float: left; width: 100%; clear: none; background:none; }
    #nav a { padding: 6px 0 8px; text-indent: 10px; color: #fff; background: rgba(194,100,40,0.75) url(http://3.bp.blogspot.com/-NTpa-jMesxo/UIoq-DksdbI/AAAAAAAAGxE/Gv1JOZNpIDQ/s1600/bg_arrow_white.png) 96% 50% no-repeat; border-top: 1px solid rgb(194,100,40); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
    #nav a:hover { border-bottom: none; }