JSFiddle - React, Tailwind, and code Playground

by nachiket

HTML

<div style="position: absolute; width:400px; height:200px; border: 2px solid green; z-index:33; top:200px; left: 200px; overflow-y: scroll; -webkit-overflow-scrolling: touch; overflow-x: hidden">
	<div style="padding: 20px; height: 30px; border: 1px solid #ccc; background-color:white; -webkit-transform:translateZ(0); position: relative;">Test</div>
	<div style="padding: 20px; height: 30px; border: 1px solid #ccc; background-color:white; -webkit-transform:translateZ(0); position: relative;">Test</div>
	<div style="padding: 20px; height: 30px; border: 1px solid #ccc; background-color:white; -webkit-transform:translateZ(0); position: relative;">Test</div>
	<div style="padding: 20px; height: 30px; border: 1px solid #ccc; background-color:white; -webkit-transform:translateZ(0); position: relative;">Test</div>
	<div style="padding: 20px; height: 30px; border: 1px solid #ccc; background-color:white; -webkit-transform:translateZ(0); position: relative;">Test</div>
	<div style="padding: 20px; height: 30px; border: 1px solid #ccc; background-color:white; -webkit-transform:translateZ(0); position: relative;">Test</div>
</div>
<div id="fabric-layer" class="layer unselectable" unselectable="on" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid green"><div class="canvas-container" style="width: 833px; height: 827px; position: relative; -webkit-user-select: none;"><canvas id="fabric-canvas" class="lower-canvas" width="833" height="827" style="position: absolute; width: 833px; height: 827px; left: 0px; top: 0px; -webkit-user-select: none;"></canvas><canvas class="upper-canvas " width="833" height="827" style="position: absolute; width: 833px; height: 827px; left: 0px; top: 0px; -webkit-user-select: none; cursor: default;"></canvas></div></div>