JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
  <div class="main"></div>
</div>
<div class="box">
  <div class="_box"></div>
  <div class="_box"></div>
  <div class="_box"></div>
  <div class="_box"></div>
</div>

CSS

* {
  box-sizing: border-box;
}
body {
  background: black;
}
div.box {
  width: 50%;
  float:left;
  background: white;
  position: relative;
  padding: 20px;
}
div.box:last-child {
  /* padding-left: 10px/ */
}
div.main {
  width: 100%;
  padding-top: 63.5%;
  background: yellow;
}
div._box {
  width: calc(50% - 20px);
  padding-top: 30%;
  margin: 5px;
  background: yellow;
  float: left;
}