JSFiddle - React, Tailwind, and code Playground

by Purag Moumdjian

HTML

<div id="header">
MY CONTENTS
</div>
<div id="main">
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS<br/>
    MY OTHER CONTENTS
</div>

CSS

html,body {
    height:100%;
}
#header {
    position:absolute;
    width: 100%;
    height: 100px;
    background:#c3c3c3;
}
#main {
    background: #eee;
    height:100%;
    border-top:100px solid transparent;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    overflow:auto;
}