JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS Grids</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="container">
        <div class="Header">Header</div>
        <div class="Menu">Menu</div>
        <div class="Sidebar">Sidebar</div>
        <div class="Footer">Footer</div>
    </div>
</body>

</html>

CSS

* {
    margin: 0;
    top: 0;
    bottom: 0;
    font-family: sans-serif;
    font-size: 1.2em;
}

title {
    display: none;
}

.container {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 40px auto 40px;
}

.Header {
    background-color: beige;
    grid-column: 1/-1;
}

.Menu {
    background-color: red;
}

.Sidebar {
    background-color: burlywood;
    grid-column: 2/-1;
}

.Footer {
    background-color: aquamarine;
    grid-column: 1/-1;
}