JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="page">
        <div class="header">header</div>
        <div class="main">
            <div class="sidebar">sidebar</div>
            <div class="content-wrapper">
                <div class="content">content</div>
            </div>
        </div>
        <div class="footer">footer</div>
    </div>
</body>

CSS

*{
    margin: 0;
    padding: 0;
}
.page{
    
}
.header{
    height: 48px;
    background: green;
}
.main{
    background: gray;
}
.sidebar{
    min-height: 100%;
    width: 230px;
    float: left;
    height: 500px;
}
.content-wrapper{
    margin-left: 230px;
    background: lightblue;
    padding: 50px 0;
}
.content{
    width: 450px;
    margin: 0 auto;
    background: yellow;    
}
.footer{
    height: 48px;
    background: blue;
}