JSFiddle - React, Tailwind, and code Playground

HTML

<div class="horizontal">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">News</a>
        </li>
        <li><a href="#">Articles</a>
        </li>
    </ul>
</div>

CSS

div.horizontal
{
width:100%;
height:63px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{

}
div.horizontal a
{
display:block;
width:86px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:10px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#7A991A;
}