JSFiddle - React, Tailwind, and code Playground

by infiniteloops

HTML

<div class="main">
    <div>content here</div>
    <div class="inner">
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        inner scrollable content
        <br/>
        Special content
    </div>
    More content
    <div class="bottom">
        Footer data
    </div>
</div>

CSS

.main{
    padding: 10px;
    height: 2000px;
}

.inner{
    border: 1px solid;
    margin: 10px;
    height: 100px;
    width: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.bottom{
    bottom: 5px;
    position: fixed;
}