JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1" class="box">
    <div class="sub_box"></div>
    <div class="sub_box"></div>
    <div class="sub_box"></div>
    <div class="sub_box"></div>
    <div class="sub_box"></div>
    <div class="sub_box"></div>
    <div class="sub_box"></div>
    <div class="sub_box"></div>
    <div class='clearer'></div>
</div>

CSS

.clearer{
    clear:both;
}

.box{
    width:300px;
    overflow:visible;
    background-color:#c3c3c3;
}

.sub_box{
    float:left;
    width:100px;
    height:100px;
    border:1px solid black;
}