JSFiddle - React, Tailwind, and code Playground

HTML

<div class='test'>
    <ul>
        <li></li>
        <li></li> 
        <li></li>
        <li></li>
    </ul>
</div>

CSS

.test{
    width: 500px;
    height: 100px;
    overflow: hidden;
}
.test > ul{
    list-style:none;
    /*width: 1000px;*/
    width: auto;
    height: 100%;
    background-color:#999;
    display: block;
    padding: 0px;
    margin: 0px;
}
.test > ul > li{
    float: left;
    display: block;
    height: 100%;
    width: 180px;   
    background-color:#99c;
    margin-right:10px;
}