JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div id="topbar" class="bar"> </div>
<div id="content" class="pad">    
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
13<br>
14<br>
15<br>
16<br>
17<br>
18<br>
19<br>
20<br>
21<br>
22<br>
23<br>
24<br>
25<br>
26<br>
27<br>
28<br>
29<br>
30<br>
31<br>
32<br>
33<br>
34<br>
35<br>
36<br>
37<br>
38<br>
39<br>
40<br>
41<br>
42<br>
    </div>
    <div id="bottombar" class="bar"></div>
</div>

CSS

#container{
    position:relative;
    height:300px;
}
#content{
    height:200px; 
    width: 200px;
    padding: 50px;
    overflow-y: auto;
    background-color: #cef;
}
.bar {
    position:absolute;
    width: 200px;
    height: 50px;
}
#bottombar{
    bottom:0;
    background-image: -moz-linear-gradient(bottom, rgba(204,238,255,1) 25%, rgba(204,238,255,0));
    background-image: -webkit-linear-gradient(bottom, rgba(204,238,255,1) 25%, rgba(204,238,255,0));
}
#topbar{
    background-image: -moz-linear-gradient(top, rgba(204,238,255,1) 25%, rgba(204,238,255,0));
    background-image: -webkit-linear-gradient(top, rgba(204,238,255,1) 25%, rgba(204,238,255,0));
}