JSFiddle - React, Tailwind, and code Playground

by Andy You

HTML

<div class="grid">
  <header>
    HEADER
  </header>
  <article>
    <h1>ARTICLE</h1>
    <p>Content</p>
  </article>
  <aside>ASIDE</aside>
  <footer>FOOTER</footer>
  <div class="contact">CONTACT</div>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

header, aside, footer {
  padding: 15px;
  background-color: rgba(255, 0, 255, .5);
}

article {
  padding: 15px;
  background-color: rgba(255, 0, 255, .2);
}

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 2fr 4fr;
  grid-template-areas: 
    "hd hd"
    "sidebar main"
    "ft ft";
}

header {
  grid-area: hd;
}

article {
  grid-area: main;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: ft;
}

.contact {
  grid-row: hd-start / main-end;
  grid-column: hd-end;
  background-color: red;
}