JSFiddle - React, Tailwind, and code Playground

by fabriziopaino86

HTML

<header class="mastheader">main header</header>
<h1 class="page-title">page title</h1>
<div class="main-content">MAIN CONTENT</div>
<aside class="sidebar">sidebar</aside>
<footer class="footer">main footer</footer>

CSS

body {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 2fr 1fr;
      grid-template-columns: 2fr 1fr;
      grid-template-areas: "header header"
        "title sidebar"
        "main sidebar"
        "footer footer";
      margin: 0;
      padding: 0;
      height: 100%;
    }

    body>* {
      padding: 30px;
      color: #fff;
      font-size: 20px;
    }

    .mastheader {
      background: #b46ae3;
      -ms-grid-row: 1;
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-area: header;
    }

    .page-title {
      background: #51a7fa;
      -ms-grid-row: 2;
      -ms-grid-column: 1;
      grid-area: title;
      margin: 0;
    }

    .main-content {
      background: #70bf40;
      -ms-grid-row: 3;
      -ms-grid-column: 1;
      grid-area: main;
      min-height: 500px;
    }

    .sidebar {
      background: #f49018;
      -ms-grid-row: 2;
      -ms-grid-row-span: 2;
      -ms-grid-column: 2;
      grid-area: sidebar;
    }

    .footer {
      background: #0265c0;
      -ms-grid-row: 4;
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-area: footer;
    }