JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>

CSS

ul {
    border: .25em solid skyBlue;
    text-align: justify;
}
ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}
ul:before {
    content: '';
    display: block;
    margin-top: -1.25em;
}
li {
    background-color: hotPink;
    color: #fff;
    display: inline-block;
    font: 1em/1.5 sans-serif;
    margin-right: -.25em;
    padding: .75em 1.5em;
    position: relative;
    top: 1.25em;
}