JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
</div>

CSS

#main {
/*
    min-width: 200px;
    max-width: 100%;
*/
    float: left;
    background-color: #f00;
}

#main > :last-child:after {
    clear: both;
}

.float {
    width: 150px;
    height: 150px;
    float: left;
    background-color: #00f;
}