JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_box">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  <div class="box box4"></div>
  <div class="box box5"></div>
  <div class="box box6"></div>			
</div>

CSS

.main_box {display: flex; flex-wrap: wrap;}
.box {
  width:calc(33.33% - 30px);
  height:300px;
  outline:1px solid #f00;
  margin:0 15px 30px 15px;
}