JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="wrapper-inner first">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner">
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="wrapper-inner second">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
  <div class="wrapper-inner third">
    <div class="inner"></div>
    <div class="inner">
      <div></div>
      <div></div>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
.wrapper {
  border: 3px solid #0f0;
}
.wrapper-inner {
  border: 3px solid #f00;
  margin: 20px;
  padding: 5px;
}
.inner {
  border: 3px solid #00f;
  display: inline-block;
}
.first > div {
  min-height: 50px;
  width: 48%;
}
.first > div:first-child,
.first > div:last-child{
  width: 25%;
}
.inner > div {
  border: 3px solid #ff0;
  margin: 5px;
  min-height: 15px;
}
.second .inner {
  width: 24%;
  min-height: 30px;
}
.third .inner {
  min-height: 170px;
}
.third .inner:first-child {
  width: 25%;
}
.third .inner:last-child {
  width: 73%;
}
.third .inner > div:first-child {
  min-height: 100px;
}