JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Text text</a></li>
    <li><a href="#">Text text</a></li>
    <li><a href="#">Text text</a></li>
</ul>

CSS

ul {overflow: hidden; border: 1px solid black;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}
li {float: left;}
li:first-child, li:last-child {background: red; border: 1px solid grey;
padding: 0 10px;
}
li:hover {background: yellow;}