JSFiddle - React, Tailwind, and code Playground

HTML

<div class="topbar-wrapper">
    <div class="topbar">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div...

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
.topbar-wrapper {
    height: 45px;
    width:70%;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
}
.container {
    padding-top: 45px;
    height: 100%;
}
.container .sidebar-wrapper, .container .center-wrapper {
    height: 100%;
}
.sidebar-wrapper {
    width: 30%;
    float: left;
    overflow: hidden;
}
.center-wrapper {
    width: 70%;
    float: right;
    overflow: scroll;
}
.center {
    width: 150%;
}
.topbar {
    height: 100%;
    width: 150%;
}
/* Demo styles */
 .topbar-wrapper, .sidebar-wrapper, .center-wrapper {
    background: #eee;
    border: 3px dashed #ddd;
    font-family: Helvetica Neue, Arial, sans-serif;
    text-align: center;
}
.cell {
    width: 50px;
    height: 30px;
    float: left;
    border: 1px solid black;
}
.sidebar .cell {
    float: none;
    width: 100%;
}
}

JavaScript

var parent     = document.querySelector('.center-wrapper'),
    sidebar    = document.querySelector('.sidebar'),
    topbar     = document.querySelector('.topbar'),
    has3D      = false,
    transform  = null,
    transforms = {
            'webkitTransform' : '-webkit-transform',
            'OTransform'      : '-o-transform',
            'msTransform'     : '-ms-transform',
            'MozTransform'    : '-moz-transform',
            'transform'       : 'transform'
    };

for (var k in transforms) if (k in parent.style) transform = k;

if ( transform !== null ) {
    sidebar.style[transform] = 'translate3d(0,0,0)'; // start hardware acc
    topbar.style[transform]  = 'translate3d(0,0,0)'; // start hardware acc
    // check support
    var s = window.getComputedStyle(sidebar).getPropertyValue(transforms[transform]);
    has3D = s !== undefined && s.length > 0 && s !== "none";
}

if (has3D) {
    parent.onscroll = function (e) {
        sidebar.style[transform] = 'translate3d(0px, '+ (this.scrollTop * -1) +'px, 0px)';
        topbar.style[transform]  = 'translate3d('+ (this.scrollLeft * -1) +'px, 0px, 0px)';
    }
}else{
    parent.onscroll = function (e) {
        sidebar.style.marginTop = (this.scrollTop  * -1) + 'px';
        topbar.style.marginLeft = (this.scrollLeft * -1) + 'px';
    }
}