JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<div class="wrapper">
    <div class="content_wrapper">    
        <div class="sidebar_wrapper">
            <div class="sidebar_left">left</div>    
        </div>
        <div class="content">
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
            <div class="clearfix"></div>
            <div class="footer">Footer</div>            
        </div>   
        <div class="sidebar_wrapper">
            <div class="sidebar_right">right</div>
        </div> 
    </div>    
</div>

CSS

body {
    margin:0;
}
.wrapper{
    width: 100%;
    height: 100vh;
    background-color: blue;
}

.content_wrapper{
    width: 600px;
    height: 100%;
    background-color: orange;
    margin: auto;    
}

.content{
    width: 400px;
    height: 100%;
    background-color: red;
    margin: 0px 0px 0px 100px;
    float: left;
    overflow: auto;
}

.sidebar_left,
.sidebar_right{
    float: left;
    height: 100px;
    width: 100px;
    background-color: limegreen;
    bottom: 0px;
    position: absolute;
}

.sidebar_right{
        
}

.sidebar_wrapper{
    height: 100%;
    float: left;
}

.clearfix{
    clear: both;
}

.footer{
    background-color: yellow;
    position: absolute;
    bottom: 0px;
    width: 400px;
}