JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
  <div class="block-1">1</div>
  <div class="block-2">2</div>
  <div class="block-3">3</div>
  <div class="block-4">4</div>
  <div class="block-5">5</div>
  <div class="block-6">6</div>
</div>

CSS

.content {
  width: 100%;
  height: 100%;
}
.block-1 {
  width: 70%;
  height: 100px;
  float: left;
  background: red;
}
.block-2 {
  width: 70%;
  height: 200px;
  float: left;
  background: green;
}
.block-3 {
  width: 30%;
  height: 150px;
  float: right;
  background: gray;
}
.block-4 {
  width: 30%;
  height: 150px;
  float: right;
  background: yellow;
}
.block-5 {
  width: 30%;
  height: 150px;
  float: right;
  background: coral;
}
.block-6 {
  width: 70%;
  height: 550px;
  float: left;
  background: blue;
}