JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<body>
<div class="bloc_page">
    <div class="left">
        <header>
            Ici ton header gauche
        </header>
        <aside>
            Ici ton aside gauche sous le header
        </aside>
    </div>
 
    <section>
        Ici ton contenu principal
    </section>
     
    <div class="right">
        <header>
            Ici ton header de Droite
        </header>
        <aside>
            Ici ton aside droite sous le header
        </aside>
    </div>
</div>
</body>

CSS

body, html {
    height:100%;
    padding:0;
    margin:0;
}

.bloc_page {
    min-height:100vh;
    overflow:hidden;
    background:#494949;
}

header {
    color:white;
    margin-bottom:15px;
}

.left, .right {
    width:13%;
    padding: 1%;
    min-height:100vh;
    float:left;
    color:white;
}

section {
    width:58%;
    padding: 1% 5%;
    background:white;
    min-height:100vh;
    float:left;
}