JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first">
    <ul>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
    </ul>
</div>
<div id="first1">
    <ul>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
    </ul>
</div>
<div id="first2">
    <ul>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
    </ul>
</div>
<div id="first3">
    <ul>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
    </ul>
</div>
<div id="first4">
    <ul>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
        <li>LI</li>
    </ul>
</div>

CSS

li {
    lisi-style: none;
    display: inline-block;
    padding: 10px 5%;
    background: red;
}
li:first-child {
    border-radius: 15px 0px 0px 15px;
}
li:last-child {
    border-radius: 0 15px 15px 0;
}
div {
    margin-bottom: 10px;
}
#first {width: 230px;}
#first1 {width: 300px;}
#first2 {width: 380px;}
#first3 {width: 500px;}
#first4 {width: 600px;}