JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="top">
        top bar, fixed
    </div>
    <div class="text">
        <textarea>first line
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
Some text, make it long
last line</textarea>
    </div>
</div>

CSS

html,
body {
    height: 100%;
    margin: 0;    
}

.main {
    background-color:#eff;
    height: 100%;
}

.top {
    position:fixed;
    top:0;
    left:0;
    right:0;
    background-color:#00f;
}

.text {
    border-top: 18px solid transparent;
    height: 100%;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
}

textarea {
    height:10000px;
}