JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li><a href="">item</a></li>
    <li><a href="">item</a></li>
    <li><a href="">long item</a></li>
    <li><a href="">item</a></li>
    <li><a href="">item</a></li>
    <li><a href="">item</a></li>
</ul>

CSS

ul,li{
    margin: 0;
    padding: 0;
}

.nav{
    width: 100%;
    display: table;
}

.nav li{
    display: table-cell;
    padding: 0 5px;
    text-align: center;
}

.nav a{
    width: 100%;
    display: inline-block;
    padding: 10px 0;
    background: #ccc;
    white-space: nowrap;
}