JSFiddle - React, Tailwind, and code Playground

by user2314737

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div class="slide-content">
    <div id="slide-content">
        <div class="magnify" style="width: 266px;">
            <div class="large" style="display: none; left: 195.615px; top: 79.0139px; background-position: -150px -54px;">
                
                	<div class="large-image"></div>
            </div>
            <img class="small" src="https://lh3.googleusercontent.com/gzHg89Pc4MtSrIeH__viNCTdBDDemmYf5VDG7vnZzRiaqWBKOKEzHH0PtlpLu8vyA27dg0q7-pmxAggQEF3p5JsDCPWjbux1uQJGLDNTSLsB7MVJG_cBWDDZqkdcshbeCfXCC4UCQMe1ogugc1R8zduLOfeONFnbhGObEFmBzBF60E6ff8lN8BBoZSxPGW_p3LvTdC4k49ULEVZR9QlJDo_JuMUIM-kSBtrN6WEtQ0RRJPUnqIrwmWj3ec_37hdSSzdPHmYLaNPTbJ1wF3dY8wYn5sJG6tdxk7qp-gI-q7xcFEK2huR6YwJtKTpx5U6mn2tr8Vs00vuvHf1fzi-_40ZWA3XNKWh8syUbTs-WYob7Xb4mSKCr5P4QTfUtHFwHuREv45j24LRdSe5_8B_YWCnIB6wG5x4PbNUEn70OlYSvVgS_rYEkeVqMcY0hQCJuIivfkBacTYFrTF61obq1ixtYSmkyhp8CV3atCsHFm2JwKIlJBZ5fwwnZICfKDITDt1qYsb64TrhNL7Wg7BHSazQ6Tkr3exVtQZ6yp57PsQ=s220-no">
        </div>
    </div>
    <canvas class="slide-canvas-layer-opacity hide" width="835" height="470" style="margin-top: -470px;"></canvas>
    <canvas class="slide-canvas-layer hide" width="835" height="470" style="margin-top: -470px;"></canvas>
</div>

CSS

.hide {
            display: none!important;
        }

        body {
            font-family: Verdana;
        }

            body > * {
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

        #wrapper {
            width: 1000px;
            height: 550px;
            background-color: #cecbcb;
            margin: auto;
        }

        #menu-left {
            height: 100%;
            width: 100px;
            float: left;
        }

        #menu-left-tool-box {
            height: 60%;
            width: 100%;
            box-shadow: 0px 1px 0px 0px #b2b0b0;
            text-align: center;
        }

        .menu-left-tool-box-button {
            width: 35px;
            height: 35px;
            background-color: transparent;
            margin: 4px;
            padding: 0;
            outline: none;
            border-width: 1px;
            background-position: center;
            background-repeat: no-repeat;
        }
        .menu-left-tool-box-button:hover {
                transform: scale(1.05);
                -webkit-transform: scale(1.05);
                -moz-transform: scale(1.05);
                cursor: pointer;
            }
        .tool-box-button-active {
            background-color: rgba(30, 182, 18,0.3);
        }

        .menu-left-tool-box-button-child-pencil {
            width: 10px;
            height: 10px;
            margin: 0.5px;
            padding: 0;
            border-width: 1px;
            background-size: contain;
            float: left;
        }

        .menu-left-tool-box-button-child-pencil-active {
            box-shadow: 0px 0px 0px 1px #000;
        }

        .menu-left-tool-box-button-child-brush {
            width: 10px;
            height: 10px;
            margin: 0.5px;
           ...

JavaScript

var currentSlide = 8;
    var onMouseDown = function(event) {
        var elements = (allElementsFromPoint(event.pageX, event.pageY));
        for (var i = 0; i < elements.length; i++) {
            if ($(elements[i]).hasClass("slide-canvas-layer")) {
                if (tool == "pencil" || tool == "brush") {
                    canvas.addEventListener('mousemove', onPaint, false);

                }
            }
        }
    };
    var onMouseUp = function(event) {
        var elements = (allElementsFromPoint(event.pageX, event.pageY));
        for (var i = 0; i < elements.length; i++) {
            if ($(elements[i]).hasClass("slide-canvas-layer")) {
                canvas.removeEventListener('mousemove', onPaint, false);
            } 
        }
    };
    var onTouchStart = function(event) {
        var elements = (allElementsFromPoint(event.touches[0].pageX, event.touches[0].pageY));
        for (var i = 0; i < elements.length; i++) {
            if ($(elements[i]).hasClass("slide-canvas-layer")) {
                if (tool == "pencil" || tool == "brush") {
                    canvas.addEventListener('touchmove', onPaint, false);
                }
            }
        }
    };
    var onTouchEnd = function(event) {
        var elements = (allElementsFromPoint(event.changedTouches[0].pageX, event.changedTouches[0].pageY));
        for (var i = 0; i < elements.length; i++) {
            if ($(elements[i]).hasClass("slide-canvas-layer")) {
                canvas.removeEventListener('mousemove', onPaint, false);
                canvas.removeEventListener('touchmove', onPaint, false);
            }
        }
    };
    window.onload = function() {
        $(".menu-left-tool-box-button").bind('click', function(e) {
            tool = $(this).val();
            setTool(this);
        });
        
        $(".coversheet").find(".coversheet-plus-minus-button").bind('click', function(e) {
            switch ($(this).val()) {
                case "+":
               ...