JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
  <div class="item item7"></div>
  <div class="item item8"></div>
</div>

CSS

.grid {
  display: grid;
  grid-column-gap: 10px;
  grid-template-areas:
        "item1 item1 item2"
        "item3 item4 item5"
        "item6 item7 item8"
        "item9 item10 item8";
}

.item {
  padding: 50px;
  margin-bottom: 10px;
  background: #F00;
}

.item1 {
  grid-area: item1;
}
.item2 {
  grid-area: item2;
}
.item3 {
  grid-area: item3;
}
.item4 {
  grid-area: item4;
}
.item5 {
  grid-area: item5;
}
.item6 {
  grid-area: item6;
}
.item7 {
  grid-area: item7;
}
.item8 {
  grid-area: item8;
}
.item9 {
  grid-area: item9;
}