JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

CSS

* { margin: 0; padding: 0 }

html, body {
    height: 100%;background-color: #809574
}

ul {
    height: 25%;
    list-style: none;
    display:table;
    width:50%;
    
}

ul li {
    height: 25%;
    display:table-row;
}

ul li a {
    display: table-cell;
    text-align: center;
    background: orange;
    vertical-align:middle;
    border-bottom:1px solid white;
}