JSFiddle - React, Tailwind, and code Playground

HTML

<ul id = "Navigation1">
    <li><a href = "About.html">About</a></li>
    <li><a href = "Contact.html">Contact</a></li>
    <!-- ... -->
</ul>
<ul id = "Navigation2">
    <li><a href = "Home.html">Home</a></li>
    <li><a href = "About.html">About</a></li>
    <li><a href = "Contact.html">Contact</a></li>
    <!-- ... -->
</ul>
<ul id = "Navigation3">
    <li><a href = "Home.html">Home</a></li>
    <li><a href = "News.html">News</a></li>
    <li><a href = "About.html">About</a></li>
    <li><a href = "Contact.html">Contact</a></li>
    <!-- ... -->
</ul>

CSS

#Navigation1, #Navigation2, #Navigation3{
    background:#eee;
    margin-top:30px;
    height:20px;
}
#Navigation1 li, #Navigation2 li, #Navigation3 li{
    list-style-type: none;
    text-align: center;
    float: left;
    width: 50%;
}
#Navigation2 li {width: 33%;}
#Navigation3 li {width: 25%;}