JSFiddle - React, Tailwind, and code Playground

HTML

<div id="id">
    <ul>
        <li class="link1">link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li class="link2">link</li>
          </ul>
</div>

CSS

.link1 {
    display: inline-block;
    padding: 10px 5%;
    background: blue;
    border-radius: 15px 0px 0px 15px;}

.link2 {  
    display: inline-block;
    padding: 10px 5%;
    background: blue;
    border-radius: 0px 15px 15px 0px;}

li {  
    display: inline-block;
    padding: 10px 5%;
    background: blue;
    margin: -2px;
    width: 24px;    }
li:hover { background: red;}