JSFiddle - React, Tailwind, and code Playground

by Andy You

HTML

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 100px);
  grid-gap: 5px;
}
.grid div {
  text-align: center;
  padding: 15px;
  background-color: #ff1664;
}
.grid > div:nth-child(1) {
  grid-column: 1/-1;
}