JSFiddle - React, Tailwind, and code Playground

by David Sch

HTML

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

CSS

.grid-1 {
    /* ..existing styles */
       display: grid;

    grid-template-areas:    "header header header"
                            "main main main"
                            "footer footer footer";
}

.item-1 {
  background: #b03532;
  grid-area: header;
}
.item-2 {
  background: #33a8a5;
  grid-area: main;
}
.item-3 {
  background: #30997a;
  grid-area: sidebar;
}
.item-4 {
  background: #6a478f;
  grid-area: footer;
}