JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <ul class="box-list">
    <li class="box-item"></li>
    <li class="box-item"></li>
    <li class="box-item"></li>
    <li class="box-item"></li>
    <li class="box-item"></li>
  </ul>
</div>

CSS

.wrap{
  width:600px;
}
.box-list{
    list-style:none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.box-item{
  width:100px;
  height:100px;
  background:#ccc;
  margin:0 0 20px;
  display:block;
}