JSFiddle - React, Tailwind, and code Playground

by Alexey Zakharov

HTML

<div class="blocks">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

CSS

.blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(140px, 1fr));
  grid-gap: 20px;
  grid-template-areas:
    'a b c'
    'a d d';
}

.block {
  background-color: salmon;
}

.block:nth-child(1) { grid-area: a }
.block:nth-child(2) { grid-area: b }
.block:nth-child(3) { grid-area: c }
.block:nth-child(4) { grid-area: d }