JSFiddle - React, Tailwind, and code Playground

by UnsungHero97

HTML

<div id="centeredmenu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#" class="active">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS

#centeredmenu {
    float:left;
    width:100%;
    background:#fff;
    border-bottom:4px solid #000;
    overflow:hidden;
    position:relative;
}
#centeredmenu ul {
    clear:left;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
    text-align:center;
}
#centeredmenu ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    right:50%;
}
#centeredmenu ul li a {
    display:block;
    margin:0 0 0 1px;
    padding:3px 10px;
    background:#ddd;
    color:#000;
    text-decoration:none;
    line-height:1.3em;
}
#centeredmenu ul li a:hover {
    background:#369;
    color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
    color:#fff;
    background:#000;
    font-weight:bold;
}