JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<body>
<div class="wrapper">
    <div class="middle_fix">
        <div class="left-col">left-col</div>
        <div class="right-col">right-col</div>
    </div>

    <div class="menu">menu</div>

    <div class="content-block">
        content-block
        
    </div>

    <div class="footer">footer</div>
</div>
</body>    
</html>

CSS

html,body{height:100%;margin:0px;padding:0px;}
.wrapper{position:relative;width:90%;margin:0px auto;}
.middle_fix{position:fixed;width:90%;height:0px;margin:50px auto;}
.left-col{position:absolute;left:0px;top:0px;width:20%;}
.right-col{position:absolute;right:0px;top:0px;width:20%;}
.menu{width:100%;height:50px;background:#555;}
.content-block{margin:0px 20%;padding:200px 10px;background:#999;}
.footer{width:100%;height:50px;background:#555;}