JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<div id="header"></div>
<div id="wrapper">
    <div id="sidebar">
    </div>
    <div id="main">
         <div id="footer"></div>
    </div>
   
</div>

CSS

body {
    padding:0;
    margin:0;
}
#header {
    height:50px;
    background:black;
    position:fixed;
    left:0;
    right:0;
    top:0;
    z-index:1050;
}
#wrapper {
      min-height: 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    display: inline-block;
   /* padding-top:50px; */
}
#sidebar {
    position: fixed;
    width: 160px;
    left: 0;
    height: 100%;
    padding-top: 50px;
    background-color: #333;
    z-index: 100; /*  -webkit-transition:all 0.5s linear;     -moz-transition:all 0.5s linear;     transition:all 0.5s linear;*/
}
#main {
position: relative;
height: 100%;
overflow-y: auto;
padding: 50px 0 0 15px;
margin-left: 160px;
/* margin-top: 50px; */
 /*  -webkit-transition:all 0.5s linear;     -moz-transition:all 0.5s linear;     transition:all 0.5s linear;*/
}
#footer { 
    background:green;
height:30px;
    margin-left:-15px;
    bottom:0;
    position:relative;
}