JSFiddle - React, Tailwind, and code Playground

HTML

<div class="my-flex-container">
  <div class="my-flex-row">
    <div class="my-flex-block">item1</div>
    <div class="my-flex-block">item2</div>
    <div class="my-flex-block">item3</div>
    <div class="my-flex-block">item4</div>
    <div class="my-flex-block">item5</div>
  </div>
</div>

CSS

.my-flex-container{
  width: 500px;
  background: #999;
  padding: 10px;
}

.my-flex-row {
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 -12.5px -20px;
}

.my-flex-block{
  background: #000;
  text-align: center;
  color: #fff;
  font: 14px/100px Arial;
  height: 100px;
  flex-basis: 150px;
  margin: 0 12.5px 20px;
}