JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flexcontainer">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

CSS

.flexcontainer{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    
    float: left;
    
    max-height: 450px;
    min-height: 300px;

    background-color: #DCE7F2;
    border: 1px solid #2A4F73;    
}
.flexcontainer > div {
    background-color: #E46119;
    border: 1px solid #626262;
    height: 100px;
    margin: 3px;
    width: 100px;
}