JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="flexbox">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

CSS

.child {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: #e46119;
    border: 1px solid #626262;
    margin: 3px;
}

.flexbox {
    display: -webkit-flex;
    display: flex;
   
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;

	flex-direction: column;
	-webkit-flex-direction: column;

	justify-content: flex-start;
	-webkit-justify-content: flex-start;

	align-items: flex-start;
	-webkit-align-items: flex-start;
    
    height: 400px;
    background-color: #dce7f2;
    border: 1px solid #2a4f73;
}

.container {
    display: inline-block;
}