JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="pill">
    <li>What</li>
    <li>is</li>
    <li>this</li>
    <li>white</li>
    <li>space?</li>
</ul>

CSS

ul.pill {
    list-style: none;
    list-style-type:none;
    list-style-position:initial;
    margin:auto;
}
    ul.pill li {     
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        background-color:lime;
        border-left: 1px solid navy;
        border-right: 1px solid navy;
        color: black;
        display:inline-block;
        font-size: 14pt;
        height: 50px;
        margin-left: 0px;
        margin-right: 0px ;
        margin:0;
        padding-left: 30px;
        padding-right: 30px;
    }

    ul.pill li:first-child {
        border: none;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;   
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;     
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    ul.pill li:last-child {
        border: none;
        -moz-border-radius-topright: 20px;
        -moz-border-radius-bottomright: 20px;   
        -webkit-border-top-right-radius: 20px;
        -webkit-border-bottom-right-radius: 20px;   
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }