JSFiddle - React, Tailwind, and code Playground
HTML
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
CSS
* {
margin:0;
padding:0;
}
body {
padding:0px;
}
div {
border-radius: 5px;
border-collapse: collapse;
margin:0px
}
#header {
z-index: 1;
position: fixed;
width: 80%;
height: 60px;
background-color: #000028;
margin: auto;
left: 10%;
}
#left {
width: 20%;
height: 1500px;
background-color: #B9D7D9;
z-index: 2;
position: relative;
float: left;
top: 60px;
left: 10%;
}
#right {
width: 60%;
z-index: 0;
height: 1500px;
background-color: #4AB7FF;
position: relative;
float: right;
right: 10%;
top: 60px;
}
#footer {
height: 50px;
background-color: #668284;
clear: both;
width: 80%;
z-index: 3;
position: relative;
left:10%;
}