JSFiddle - React, Tailwind, and code Playground

by MarkBennett

HTML

<div class="header">
    I'm the header yay!
</div>
<div class="sidebar">
    <h1>Sidebar</h1>
    <h1>Sidebar</h1>
    <h1>Sidebar</h1>
    <h1>Sidebar</h1>
    <h1>Sidebar</h1>
    <h1>Sidebar</h1>
    <h1>Sidebar</h1>
    <h1>Sidebar</h1>
    <h1>Sidebar</h1>
    <h1>Sidebar</h1>
    <h1>Sidebar</h1>
    <h1>Sidebar</h1>
    <h1>Sidebar</h1>
    <h1>Sidebar</h1>
</div>
<div class="map">
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
    <h1>Where am I??</h1>
</div>

CSS

html, body { position: relative; padding: 0; margin: 0; height: 100%; width: 100%; }
.header { position: absolute; top: 0; left: 0; right: 0; height: 60px; background: red; }
.sidebar { position: absolute; top: 60px; left: 0; width: 100px; bottom: 0; background: blue; overflow: auto; z-index: 100; }
.map { position: absolute; top: 60px; left: 0; right: 0; bottom: 0; background: green; overflow: hidden;}