JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<div id="outer-container">
    <div id="top"></div>
    <div id="left"></div>

    <div id="scroll-container">
        <div id="table"></div>
    </div>
</div>

CSS

body {
    margin: 60px 10px;
}

#table {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABaCAYAAAAmYXGxAAABd0lEQVR4Xu3csYkCYRhF0RnUYCzCimzbBoyMLcHESDRwhCngCiOeLeAh57+48MHueNvsj4OfYfd4nguGEeibEWiR02IDKNBYIJ5TKNBYIJ5TKNBYIJ5TKNBYIJ5TKNBYIJ5TKNBYIJ5TKNBYIJ7LCr1s96f4s/31nAPz/PxZoS72LvZf+UpRaMwKFGgsEM8pFGgsEM8pFGgsEM8pFGgsEM8pFGgsEM8pFGgsEM8pdK2gLvbty7jYu9i3RX3WfIfGrkCBxgLxnEKBxgLxnEKBxgLxnEKBxgLxnEKBxgLxnEKBxgLxnEKBxgLxXFaoi337Mi72LvZtUS723/H0b4Zq1+yXkj+reT8N0DhRoEBjgXhOoUBjgXhOoUBjgXhOoUBjgXhOoUBjgXhOoWsFdbFvX2a8D9OhnfzNtWm4X4tPDnRWBFrktNgACjQWiOcUCjQWiOcUCjQWiOcUCjQWiOcUCjQWiOcUCjQWiOcUCjQWiOeyQl3s25d5AdyfU7nxgd0XAAAAAElFTkSuQmCC);
}

#outer-container {
    width: 1000px;
    height: 5000px;
    overflow: hidden;
    margin: auto;
    position: relative;
}

#top {
    width: 2500px;
    height: 90px;
    background: rgba(0, 0, 255, 0.2);
    
    position: absolute;
    top: 0px;
    left: 0px;
}

#left {
    width: 84px;
    height: 5000px;
    background: rgba(0, 255, 0, 0.2);
    
    position: absolute;
    top: 90px;
    left: 0px;
}

#scroll-container {
    width: 915px;
    overflow-x: auto;
    overflow-y: visible;
    
    position: absolute;
    top: 0px;
    left: 84px;
    height: 5150px;
}

#table {
    width: 2500px;
    height: 5000px;
    
    position: absolute;
    top: 90px;
    left: 0px;
}