JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="item d1"></div>
  <div class="item d1"></div>
  <div class="item d2"></div>
  <div class="item d2"></div>
  <div class="item d2"></div>
  <div class="item d2"></div>
  <div class="item d3"></div>
  <div class="item d3"></div>
  <div class="item d3"></div>
  <div class="item d3"></div>
  <div class="item d3"></div>
  <div class="item d3"></div>
  <div class="item d3"></div>
  <div class="item d3"></div>
</div>

CSS

* {box-sizing:border-box;}
html,body {
  height: 100%;
  margin: 0;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100%;
}
.item {
  width: 33.33%;
}
.d1 {
  height: 50%;
  border:1px solid red;
}
.d2 {
  height: 25%;
  border:1px solid green;
}
.d3 {
  height: 12.5%;
  border:1px solid blue;
}