JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="container">
  <div class="header test">header</div>
  <div class="main">main</div>
  <div class="block test">footer</div>
</div>

CSS

.container {
    width: 90%;
    max-width: 992px;
    margin: 0 auto;
    display: grid;		
    border: 1px solid black;
    grid-template-columns: 150px auto;
    grid-template-rows: 120px auto auto;
    grid-gap: 10px;
    grid-template-areas:
        "mainside header"
        "mainside mainblock"
        "footer footer";
}
 
.block {
    z-index: 1;
    position: relative;
    grid-area: 'footer';
}
 
.header {
    position: relative;
    grid-area: 'header';
}
 
.main {
    position: relative;
    grid-area: 'mainside';
}
 
.test:after {
    position: absolute;
    z-index: -1;
    left: -2500px;
    top: 0;
    width: 5000px;
    height: 100%;
    display: block;
    content: '';
    background-color: blue;
}