JSFiddle - React, Tailwind, and code Playground

by Yunus Gaziev

HTML

<div class="grid">
  <div class="cell a">A</div>
  <div class="cell b">B</div>
  <div class="cell c">C</div>
  <div class="cell d">D</div>
  <div class="cell e">E</div>
  <div class="cell a">A</div>
  <div class="cell b">B</div>
  <div class="cell c">C</div>
  <div class="cell d">D</div>
  <div class="cell e">E</div>
  <div class="cell a">A</div>
  <div class="cell b">B</div>
  <div class="cell c">C</div>
  <div class="cell d">D</div>
  <div class="cell e">E</div>
</div>

CSS

html,
body {
  margin: 0;
}

body {
  padding: 20px;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.cell {
  background-color: #cdcdcd;
  padding: 10px;
  grid-row-end: span 2;
}

.cell:nth-child(2),
.cell:nth-child(4),
.cell:nth-child(7),
.cell:nth-child(9),
.cell:nth-child(12),
.cell:nth-child(14),
.cell:nth-child(17),
.cell:nth-child(19) {
  grid-row-end: span 3;
  background-color: orange;
}