JSFiddle - React, Tailwind, and code Playground

HTML

<div class="conteiner">
  <div class="block_1"></div>
  <div class="block_2"></div>
  <div class="block_3"></div>
  <div class="block_4"></div>
  <div class="block_5"></div>
  <div class="block_6"></div>
  <div class="block_7"></div>
  <div class="block_8"></div>
</div>

CSS

.conteiner 
{
  width: 310px;
  height: 100vh;
  background: #FFFFFF;
  display: grid;
  grid-template: repeat(4, 1fr) / repeat(7, 1fr);
  grid-gap: 5px;
}

.block_1
{
  grid-area: 1 / 1 / span 1 / span 3;
  background: blue;
}

.block_2
{
  grid-area: 1 / 4 / span 1 / span 2;
  background: blue;
}

.block_3
{
  grid-area: 1 / 6 / span 2 / span 2;
  background: blue;
}

.block_4
{
  grid-area: 2 / 1 / span 1 / span 2;
  background: blue;
}

.block_5
{
  grid-area: 2 / 3 / span 1 / span 3;
  background: blue;
}

.block_6
{
  grid-area: 3 / 1 / span 1 / span 5;
  background: blue;
}

.block_7
{
  grid-area: 3 / 6 / span 2 / span 2;
  background: blue;
}

.block_8
{
  grid-area: 4 / 4 / span 1 / span 2;
  background: blue;
}