JSFiddle - React, Tailwind, and code Playground

by CSS_Apprentice

HTML

<div class="container">
    <ul class="nav">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
        <li><a href="#">Five</a></li>
    </ul>
</div>

CSS

ul.nav {
    width:90%;
    margin:0 auto;
    padding:0;
    list-style:none;
    text-align:center;
}
.nav li { 
    display:inline-block;
    width:18%;
    margin:0;
    padding:0;
}
.nav a {
    text-align:center;
    margin:0;
    display:block;
}

/* Unnecessary Stuff */
.container {
    background-color: #aaaaaa;
}

.nav {
    background-color: #cccccc;
}

.nav li {
    border: 1px black solid;
}