JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
  <div class="w200 h200"></div>
  <div class="w100 h200"></div>
  <div class="w200 h200"></div>
  <div class="w200 h200"></div>
  
  <div class="w150 h300"></div>
  <div class="wrap w200 h300">
    <div class="w100 h150"></div>
    <div class="w100 h150"></div>
    <div class="w200 h150"></div>
  </div>
  <div class="wrap w200 h300">
    <div class="w200 h100"></div>
    <div class="w200 h200"></div>
  </div>
  <div class="w150 h300"></div>
</div>

CSS

div{
  display:inline-block;
  border:1px solid #999;
  vertical-align:top;
  box-sizing:border-box;
}

.wrap{
  border:0;
}
.content{
  width:700px;
  vertical-align:top;
  border:0;
  font-size:0px;
}

.w100{
  width:100px;
}
.w150{
  width:150px;
}
.w200{
  width:200px;
}

.h100{
  height:100px;
}
.h150{
  height:150px;
}
.h200{
  height:200px;
}
.h300{
  height:300px;
}