JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo">
    <div class="bar">Header Bar</div>
    <div class="scrollable_content">
        <div class="someOther">Line 1</div>
        <div class="someOther">Line 2</div>
        <div class="someOther">Line 3</div>
        <div class="someOther">Line 4</div>
        <div class="someOther">Line 5</div>
        <div class="someOther">Line 6</div>
        <div class="someOther">Line 7</div>
        <div class="someOther">Line 8</div>
    </div>
</div>

CSS

.foo {
    background-color : #bbb;
    height : 300px;
    position : relative;
    width : 100%;
}
.bar {
    border-bottom : 1px solid #000;
    height : 50px;
}
.scrollable_content {
    height : 250px;
    overflow-y : auto;
}
.someOther {
    border-bottom : 1px solid #bbb;
    padding : 20px 10px;
}