JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">link</a>
    <li><a href="#">link</a>
    <li><a href="#">link</a>
    <li><a href="#">link</a>
</ul>

CSS

body {
    background: yellow;
}

li {
    display: inline-block;
    background: red;
}

a {
    display:block;
    padding: 20px;
}

li:hover {
    background: green;
}
li:first-child:hover {
    border-radius: 5px 0 0 5px;
}
li:last-child:hover {
    border-radius: 0 5px 5px 0;
}
}