JSFiddle - React, Tailwind, and code Playground

by pmn4

HTML

<ul class="items-5">
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">Link4</a></li>
    <li><a href="#">Link5 Link5 Link5 Link5</a></li>
</ul>

CSS

ul {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul li {
    display: table;
    height: 100%;
    float: left;
}
ul.items-5 li {
    width: 20%;
}
ul li a {
    display: table-cell;
    height: 40px; /* I assume you want to avoid this, but it may be necessary */
    width: 100%;
    background: red;
    vertical-align: middle;
    text-align: center;
}