JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>

<div id="container">
	<div class="box-1">
  	<div class="div-1"></div>
    <div class="div-2"></div>
	</div>
	<div class="box-2">
    <div class="div-3"></div>
	</div>
	<div class="box-3">
    <div class="div-4"></div>
	</div>
</div>

</body>
</html>

CSS

body {
  margin:0;
}

#container {
  height: 700px;
  width: 50%;
  margin: auto;
  display: grid;
  background: gray;
  grid-template-columns: 50%;
  grid-template-rows: 40% 60%;
  grid-template-areas: "box-1 box-1" "box-2 box-3";
}

div[class*="box-"] {
  position: relative;
}
.box-1 {grid-area: box-1; background: red;}
.box-2 {grid-area: box-2; background: green;}
.box-3 {grid-area: box-3; background: blue;}

div[class*="div-"] {
  position: absolute;
  background: black;
}
.div-1, .div-2 {
  height: 175px;
  width: 150px;
  bottom: 5%;
}
  .div-1 {margin-left: 10%;}
  .div-2 {margin-left: 40%;}
  
.div-3 {
  height: 150px;
  width: 150px;
  bottom: 25%;
  right: 5%;
}

.div-4 {
  height: 225px;
  width: 200px;
  top: 5%;
  left: 5%;
}