JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="content-main">main
<div id="header">Header</div>
<div id="content-box1"><p>Box 1</p></div>
<div id="content-box2"><p>Box 2</p></div>
<div id="content-box3"><p>Box 3</p></div>
</div>
</div>
CSS
body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
}
#wrapper {
width:900px;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
}
#header {
border:1px solid #bbb;
height:80px;
padding:10px;
}
#content {
margin-top:10px;
padding-bottom:10px;
}
#content div {
padding:10px;
border:1px solid #bbb;
float:left;
}
#content-left {
width:180px;
height:300px;
}
#content-main {
margin-left:10px;
width:666px;
height:480px;
}
#content-box1, #content-box2, #content-box3 {
padding:1px;
border:1px solid #bbb;
position:absolute;
margin-top:20px;
height:120px;
}
#content-box1 {
margin-left:15px;
width:200px;
}
#content-box2 {
margin-left:220px;
width:200px;
}
#content-box3 {
margin-left:420px;
width:200px;
}
#footer {
float:left;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
width:878px;
}
#bottom {
clear:both;
text-align:right;
}