JSFiddle - React, Tailwind, and code Playground

by kitex

HTML

<div id="header">Header</div>  
    
    <div id = "wrap" >
        <div id="sidebar">Side bar</div>
        <div id="content">Content</div>
    </div>

    <div id="footer">Footer</div>

CSS

body {
    margin:0;
    padding:60px 0 50px 0;
}

div#header {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    padding: 5px 0 5px;
    overflow:auto; 
    zoom: 1;
    background-color: #800080;
}

div#footer {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:50px;
    background-color: #800080;
}
 #sidebar {  width:150px;float:left; background-color:#800080; }
 #content {  width: 950px;float:right;padding: 10px;background: #FFFAF0;}