JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
        <section class = "header"></section>
        <aside class = "sidebar"></aside>
        <section class = "content"></section>
        <section class = "footer"></section>
    </main>
</body>
</html>

CSS

.header {
    background-color: red;
    grid-area: header;
  
}

.sidebar {
    background-color: blue;
    grid-area: sidebar;
 
}

.content {
    background-color: yellow;
    grid-area: content;
}

.footer {
    background-color: green;
    grid-area: footer;
}

main {
    display: grid;
    grid-template-columns: 50px 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 1fr 100px;
    grid-template-areas: "sidebar  header  header  header  header"
                         "sidebar  content content content content"
                         "footer footer footer footer footer";
}