JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div class="grid">
  <div id="header">dg</div>
  <div id="left">gag</div>
  <div id="right">agg</div>
  <div id="contact">agg</div>
  <div id="footer">agas</div>
</div>

CSS

.grid {
  display: grid;
  width: 100%;
  grid-template-areas: "header header"
                        "left right"
                         "left right"
                         "contact contact"
                         "footer footer";
  grid-template-rows: 300px 600px 600px 200px 100px;
  grid-template-columns: 1fr 3fr;
}

#header {
  background-color: burlywood;
  grid-area: header;
}

#left {
  background-color: cadetblue;
  grid-area: left;
}

#right {
  background-color: coral;
  grid-area: right;
}

#contact {
  background-color: cornflowerblue;
  grid-area: contact;
}

#footer {
  background-color: darkcyan;
  grid-area: footer;
}