JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <ul>
        <li><a href="#">первый</a></li>
        <li><a href="#">второй</a></li>
        <li><a href="#">третий</a></li>
        <li><a href="#">четвертый</a></li>
    </ul>
</div>

CSS

.wrapper{
width:800px;
margin:0 auto;
text-align:center;
}


ul{
padding:0;
margin:0;
list-style:none;
background:yellow;
}

li{
display:inline-block;
width:197px;
}


a{
display:block;
background:#000;
color:#fff;
}

a:hover{
background:none;
color:#000;
}