JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list">
                <ul>
                    <li><a href="#">List 1</a></li>
                    <li><a href="#">List item 2</a></li>
                    <li><a href="#">list 3</a></li>
                    <li><a href="#">List item 4</a></li>
                    <li><a href="#">list 5</a></li>
                    <li><a href="#">List item 6</a></li>
                </ul>
</div>

CSS

.list {
width: 100%;
margin:10px auto;
display:table;
padding:2px;
white-space:nowrap;
}
.list ul {
list-style:none;
margin:0;
padding:0;
display:table-row;
white-space:nowrap;
}

.list ul li{
display:table-cell;
text-align: center;
}
.list ul a{
display:block;
padding:4px 10px;
text-decoration:none;
background:#CCC;
border:1px solid #000;
}
.list ul a:hover{
    background: green;
    color: #000;
}