JSFiddle - React, Tailwind, and code Playground

by k_rma

HTML

<div class="wrapper">
    <div id="header">header</div>
    <div id="content">
        <div id="container">container</div>
        <div id="sidebar">
            <div id="menu">menu</div>
            <div id="credits">credits</div>
        </div>
    </div>
    <div id="footer" class="clear">footer</div>
</div>

CSS

div {
 width:100%;   
}


.wrapper {
    width: 400px; //just an example   
}

#header,
#footer {
    height: 30px;
    width: 100%;
    background-color: #ccc;
}

#container {
    float:left;
    width:70%;
    background-color: #cff;
    min-height:300px;
}

#sidebar {
    position:relative;
    float:left;
    width:30%;
    min-height:300px;
   background-color:#ffc; 
}

#menu {
    background-color: #cfc;
   height: 50px; 
}

#credits {
    background-color: #fcc;
   height: 50px;
    position:absolute;
    bottom:0px;
}


.clear {
    clear:both;
}