JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="clearfix">
    
         <ul class="clearfix">
            <li> Item 1</li>
            <li> Item 2</li>
            <li> Item 3</li>
            <li class="cleft"> Item 4</li>
            <li> Item 5</li>
            <li> Item 6</li>
            <li  class="cleft"> Item 7</li>
            <li> Item 8</li>
        </ul> 
    
</div>

CSS

#container{
    display:block;
    width:500px;
    margin:0 auto;
    border:1px solid red;
    padding:.5em;
    margin-top:2em;
}

#container ul{
    display:block;
    border:1px solid green;   
}

#container ul li{
    width:80px;
    height:80px;
    margin:.5em;
    background:#ddd;
    font-size:1.4rem;
    float:left;
    text-align:center;
    line-height:80px;
}

/* li break */
.cleft{clear:left;}

/* clearfixing */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

 
.clearfix {
    display: inline-block;
}