JSFiddle - React, Tailwind, and code Playground

by paka

HTML

<div id="container">
	    
                
	</div>

CSS

html, body {
			overflow: hidden;
			margin: 0;
		}

#sub {display: block; width: 100px; height: 100px;  position: relative; top: 10px; z-index: 5}
#sup {display: block; width: 50px; height: 50px;  position: absolute; top: 20px;  left: 20px; z-index: 15; background: yellow;}

JavaScript

/*****************/

var Sketch=function(){function e(e){e=n(e||{},f);var t="sketch-"+r++,o=e.hasOwnProperty("canvas"),i=o?e.canvas:document.createElement("canvas");switch(e.type){case d:try{s=i.getContext("webgl",e)}catch(h){}try{s=s||i.getContext("experimental-webgl",e)}catch(h){}if(!s)throw"WebGL not supported";break;case c:try{s=i.getContext("2d",e)}catch(h){}if(!s)throw"Canvas not supported";break;default:i=s=document.createElement("div")}return s.canvas=i,i.className="sketch",o?e.autoresize=!1:(e.container.appendChild(i),e.hasOwnProperty("autoresize")||(e.autoresize=f.autoresize),i.id=t),n(self,g),n(s,e),n(s,p),a(),e.autoresize&&u(),v.push(s),s.autostart&&setTimeout(s.start,0),s}function n(e,n){for(var t in n)e.hasOwnProperty(t)||(e[t]=n[t]);return e}function t(e){function n(e,n){return function(){e.call(n,arguments)}}var t={};for(var o in e)t[o]="function"==typeof e[o]?n(e[o],e):e[o];return t}function o(e,n){e.length=0;for(var t=0,o=n.length;o>t;t++)e[t]=n[t];return e}function a(){function e(e){return M[e]||String.fromCharCode(e)}function n(e){s.mouse.ox=s.mouse.x,s.mouse.oy=s.mouse.y,s.mouse.x=e.x,s.mouse.y=e.y,s.mouse.dx=s.mouse.x-s.mouse.ox,s.mouse.dy=s.mouse.y-s.mouse.oy}function a(e){var n,o=t(e);o.original=e;for(var a=s.canvas,i=0,u=0;a;a=a.offsetParent)i+=a.offsetLeft,u+=a.offsetTop;if(o.touches&&o.touches.length)for(var r,c=o.touches.length-1;c>=0;c--)r=o.touches[c],r.x=r.pageX-i,r.y=r.pageY-u,n=P[c]||r,r.dx=r.x-n.x,r.dy=r.y-n.x,r.ox=n.x,r.oy=n.y,P[c]=t(r);else o.x=o.pageX-i,o.y=o.pageY-u,n=P.mouse||o,o.dx=o.x-n.x,o.dy=o.y-n.y,o.ox=n.x,o.oy=n.y,P.mouse=o;return o}function i(e){e.preventDefault(),e=a(e),o(s.touches,e.touches),n(s.touches[0]),s.touchstart&&s.touchstart(e),s.mousedown&&s.mousedown(e)}function r(e){e=a(e),o(s.touches,e.touches),n(s.touches[0]),s.touchmove&&s.touchmove(e),s.mousemove&&s.mousemove(e)}function c(e){if(e=a(e),e.touches.length)for(var n in P)e.touches[n]||delete P[n];else...