JSFiddle - React, Tailwind, and code Playground

by chrisjg

HTML

<nav role="navigation">
    <ul class="nav menu">
        <li class="item-1">short</li>
        <li class="item-2">a bit longer</li>
        <li class="item-3">this is a lot longer</li>
        <li class="item-4">short</li>
    </ul>
</nav>

CSS

nav {
    font-size: 16px;
    letter-spacing: -0.5px;
    list-style: none outside none;
}
.nav, nav ul {
    display: table;
    margin: 0;
    width: 100%;
}
.nav {
    float: left;
    left: 0;
    position: relative;
    list-style: none outside none;
    margin-bottom: 1.42857rem;
    margin-left: 0;
    width: 400px;
}

li {
    border: 1px solid black;
    display: table-cell;
    height: 34px;
    min-width: 25%;
    text-align: center;
    vertical-align: middle;
}