JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div><span>div 1</span></div>
    <div><span>div 2</span></div>
    <div><span>div 3</span></div>
    <div><span>div 4</span></div>
    <div><span>div 5</span></div>
    <div><span>div 6</span></div>
    <div><span>div 7</span></div>
    <div><span>div 8</span></div>
    <div><span>div 9</span></div>
    <div><span>div 10</span></div>
    <div><span>div 11</span></div>
</div>

CSS

#main {
    display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
    background-color: lightblue;
}

#main div {
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
	-ms-flex: 0 0 33.3%;
	flex: 0 0 33.3%;
	
    border: 5px solid transparent;
}

#main div > span {
    display: block;
    width: 100%;
    min-height: 50px;
    background-color: #eaeaea;
}