JSFiddle - React, Tailwind, and code Playground

by switch74

HTML

<div class="body">
    <div class="header">header</div>
    <div class="container">
        <div class="wrapper">
            <div class="menu">menu</div>
            <div class="content">content</div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="footer">footer</div>
</div>

CSS

html,body{
    margin:0px;
    height:100%;
    color:#fff;
}
.body{
    position:relative;
    width:100%;
    min-height:100%;
}
.header{
    height:50px;
    background:#000;
}
.footer{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:50px;
    background:#000;
}
.container{
    background:#734d26;
    border-bottom:50px solid #fff;
}
.wrapper{
    margin:0px auto;
    width:600px;
}
.menu{
    position:relative;
    margin-top:-20px;
    #top:-20px;
    left:5px;
    float:left;
    width:200px;
    height:200px;
    background:#566a23;
    z-index:1;
}
.content{
    position:relative;
    margin-top:-10px;
    #top:-10px;
    left:-5px;
    float:right;
    width:400px;
    height:300px;
    background:#7a293c;
    z-index:2;
}
.clear{
    clear:both;
}