JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Lorem ipsum</a></li>
    <li><a href="#">Dolor</a></li>
    <li><a href="#">Sit</a></li>
    <li><a href="#">Amet</a></li>
    <li><a href="#">Consectetur</a></li>
    <li><a href="#">Adipiscing</a></li>
</ul>

CSS

ul {
	padding: 0;
	display: table;
	width: 100%;
	table-layout: fixed;
}
li {
	display: table-cell;
    white-space: nowrap;
    text-align: center;
    border: 1px solid black;
}
a {
	display: block;
	padding: 10px;
	text-align: center;
	background: white;
}
a:hover {
	background: lime;
}