JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="maincontainer">
<div id="mainheader">
<div id="header"><h1>LOGO</h></div>
<div id="bannerheader"></div>
</div>
<div id="maincontent">
<div id="navigatie">NAVIGATIE</div>
<div id="content">CONTENT
</div>
    <br style="clear:both" />
</div>
<div id="footer">Het test project</div>
</div>
</body>

CSS

body{
margin: 0;
text-align: center;
background-color: #919191;
}

div#maincontainer{
margin: 20px auto 20px auto;
width: 850px;
text-align: left;
border-style: solid;
background-color: #E6FCB7;
border-width: 6px;
}

div#mainheader{
width: 850px;
height: 130px;
}

div#header{
width: 350px;
text-align: center;
float: left;

font-size: 150%
}

div#bannerheader{
position: relative;
left: 15px;
top: 30px;
background-image:url(banner.png);
float: left;
width: 468px;
height: 60px;
border-style: solid;
}

div#maincontent{
width: 844px;
}

div#navigatie{
border-right-style: solid;
width: 20%;
height: 250px;
margin: 15px 0px 15px 0px;
float: left;
}

div#content{
width: 78%;
border:solid;
float: left;
}

div#footer{
width: 100%;
height: 55px;

    text-align: center;
}