JSFiddle - React, Tailwind, and code Playground

HTML

<header>Dit is je header</header>
<div id="main-wrapper">
    <aside id="left-sidebar">Linker sidebar</aside>
    <div id="content-wrapper">
        <section id="content">Content</section>
        <footer>Footer</footer>
    </div>
    <aside id="right-sidebar">Rechter sidebar</aside>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

* {box-sizing: border-box;}

header {
    width: 100%;
    border: 2px solid blue;
    height: 18%;
}

div#main-wrapper {
    width: 100%;
    height: 82%;
    overflow: hidden;
}

aside#left-sidebar, aside#right-sidebar {
    float: left;
    width: 20%;
    border: 2px solid red;
    height: 100%;
}

aside#right-sidebar {width: 25%;}

div#content-wrapper {
    float: left;
    width: 55%;
    border: 2px solid green;
    height: 100%;
}

section#content {
    width: 100%;
    height: 80%;
    border: 2px solid black;
}

footer {
    border: 2px solid yellow;
    width: 100%;
    height: 20%;
}