JSFiddle - React, Tailwind, and code Playground

by omarjuvera

HTML

<div id="navcontainer">
         <ul>
         <li><a href="#">Milk</a></li>
         <li><a href="#">Eggs</a></li>
         <li><a href="#">Cheese</a></li>
         <li><a href="#">Vegetables</a></li>
         <li><a href="#">Fruit</a></li>
         </ul>
</div>

CSS

#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}
#navcontainer ul li { display: inline; }

#navcontainer ul li a{
    text-decoration: none;
    padding: .2em 1em;
    color: #fff;
    background-color: #036;
}
#navcontainer ul li a:hover{
    color: #fff;
    background-color: #369;
}