JSFiddle - React, Tailwind, and code Playground

by stchangg

HTML

<body>
    <div id="viewer">
    <div id="panel-container">
        <div id="a">If value is specified, sets whether or not the specified class is associated with the selected elements. If value is a constant and truthy, then all elements are assigned the specified class, if not already assigned; if falsey, then the class is removed from all selected elements, if assigned. If value is a function, then the function is evaluated for each selected element (in order), being passed the current datum d and the current index i, with the this context as the current DOM element. The function's return value is then used to assign or unassign the specified class on each element.
</div>
        <div id="b">
If value is specified, sets whether or not the specified class is associated with the selected elements. If value is a constant and truthy, then all elements are assigned the specified class, if not already assigned; if falsey, then the class is removed from all selected elements, if assigned. If value is a function, then the function is evaluated for each selected element (in order), being passed the current datum d and the current index i, with the this context as the current DOM element. The function's return value is then used to assign or unassign the specified class on each element.
        </div>
        <div id="c">Blah</div>
    </div>
</div>
</body>

CSS

body {

}

#viewer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid gray;
    overflow: hidden;
}

#panel-container {
    width: 1000px;
    height: 100%;
    border: 1px solid red;
    position: relative;
}

#a, #b, #c {
    position: absolute;
    top: 0px;
    bottom: 0px;
    overflow-y: scroll;
}

#a {
    width: 100px;
    background: #ff9;
}

#b {
    width: 200px;
    left: 100px;
    background: #f9f;
}

#c {
    width: 200px;
    left: 300px;
    background: #9ff;
}