JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<div class="grid">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
  <div class="item-4"></div>
  <div class="item-5"></div>
  <div class="item-6"></div>
</div>

CSS

.grid > div:nth-child(even) {
  background-color: #f00;
}
.grid > div:nth-child(odd) {
  background-color: #00f;
}
.grid {
  display: grid;
  grid-gap: 5px;
  align-items: flex-start;
  grid-template-columns: 1fr 1fr;
}
.item-1 {
  height: 50px;
}
.item-2 {
  height: 100px;
}
.item-3 {
  height: 130px;
}
.item-4 {
  height: 40px;
}
.item-5 {
  height: 0;
}
.item-6 {
  height: 60px;
}