JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

    <div id="header">
        <div id="logo">
            Logo
        </div>
        <div id="menubar">
            <a href="#">Home</a> 
            <a href="#">Link 2</a> 
            <a href="#">Link 3</a> 
            <a href="#">Link 4</a> 
        </div>
        <div id="login">Login here</div>
    </div>

    <div id="mainframe">
    Main
    <div>

    <div id="saeule-1">
        Säule 1
    </div>
    <div id="saeule-2">
        Säule 2
    </div>
    <div id="saeule-3">
        Säule 3
    </div>
    <div id="saeule-4">
        Säule 4
    </div>

</div>

CSS

body {margin:0; padding:0;}
#wrapper { 
    width:95%; height:95%; margin: 0 auto; 
    background: #afcaff;
}
#header,#logo,#menubar,#login,#mainframe,#saeule-1,#saeule-2,#saeule-3,#saeule-4 { 
    border: solid 1px #999;     
}
#header { height:60px; background-color:#aaa; margin-bottom:10px;}
#logo {float:left; background-color:#777; width:150px; height:30px; padding:10px;}
#menubar { height:60px; background-color:#bbb; float:left;}
#menubar a { 
    text-decoration:none; 
    background-color:#eee; border: solid 1px #999;
    border-radius: 8px;
    padding:10px;
}
#login { height:30px; background-color:#ccc; float:right; padding:10px;}
#mainframe { height:400px; width:100%; background-color:#eee; }
#saeule-1,#saeule-2,#saeule-3,#saeule-4 { float:left; width:150px; height:200px; background-color:#aaa; margin:10px; padding: 10px;}