JSFiddle - React, Tailwind, and code Playground

by Timur

HTML

<div class="container">
    <div class="tabs-above">
            <div class="tab-content">
                <div class="tab-pane">
                    <div class="menu">
                        <div>Some menu content</div>
                    </div>
                    <div class="content">
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                        Scrollable content<br>
                    </div>
                </div>
            </div>
        </div>
</diV>

CSS

.container {
    position: absolute;
    top: 0; left 0;
    width: 200px;
    height: 100%;          
    background: lightgray;        
}

.tab-pane {
    background: yellow;            
    padding: 10px;
    top: 55px;
    bottom: 10px;
    right: 10px;
    left: 10px;
    position:absolute;
}

.content {
    background: red;
    overflow: auto;
    position: absolute;
    left:10px; right: 10px;
    bottom: 10px;
    top: 50px;   
}