JSFiddle - React, Tailwind, and code Playground

HTML

<div id='d1'>
    <ul id='ul1' class='c'>
        <li><a href='javascript:void(0)'>Fribble Fromme</a></li>
        <li><a href='javascript:void(0)'>Fobble</a></li>
        <li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li>
    </ul>
</div>

CSS

ul.c {
    text-align:center;
    display:table;
}

ul li {   
    float:left;    
}

ul li a {
    text-decoration:none;
    border: 1px solid Maroon;
    padding:2px 12px;
    background:#FFEF8A;
    width:100px;
    height:52px;
    display:table-cell;
    vertical-align:middle;
}

ul li a:hover {
    background: #CCC;
}