JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <img src="https://jscrambler.com/scripts/examples/simple_html5_demo/source_code/images/image.png" />
    <h1>SIMPLE DEMO</h1>
    <canvas id="canvas" width="640" height="300" oncontextmenu="return false;" onselectstart="return false;">
                <!-- This text is displayed if the visitor's browser does not support HTML5.
                You can change it, but it is a good idea to link to a description of a browser
                and provide some links to download some popular HTML5-compatible browsers. -->
                Your browser does not appear to support HTML5.  Try upgrading your browser to the latest version.  <a href="http://www.whatbrowser.org/">What is a browser?</a>
                <br><br><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">Microsoft Internet Explorer</a><br>
                <a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br>
                <a href="http://www.google.com/chrome/">Google Chrome</a><br>
                <a href="http://www.apple.com/safari/download/">Apple Safari</a><br>
                <a href="http://www.google.com/chromeframe">Google Chrome Frame for Internet Explorer</a><br>
    </canvas>
    <div style="margin-top:30px;">
        <button onclick="stopAnim()">Stop</button>
        <span id="draw_number"></span> images in <span id="draw_time">0</span> seconds.
    </div>
    <p>(Test duration: 30 seconds)</p>
    <br>
</div>
        <script type="text/javascript" src="demo.js"></script>

CSS

@font-face {font-family: 'Oswald';font-style: normal;font-weight: 400;src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');}
            canvas{ background-color: #FFF;cursor: pointer;}
            html,body{margin: 0;background: url("images/cube.png") no-repeat scroll 10% 0 #1C91FF}
            body{font-family: 'Oswald', sans-serif;color: #FFF;}
            h1{margin-bottom: 0;color: #FFF;font-size: 3em;line-height: 35px;text-shadow: 3px 3px #333;}
            #container{padding-top: 20px;margin-left: 10%;}
            #canvas{box-shadow: 3px 3px 2px #333;}

JavaScript

var G8C={'J':function(C,A){return C-A;},'m':function(C,A){return C/A;},'F':function(C,A){return C>=A;},'s':function(C,A){return C/A;},'W':function(C,A){return C/A;},'N':function(C,A){return C<=A;},'X':function(C,A){return C*A;},'d8':function(C,A){return C===A;},'Q':function(C,A){return C>A;},'B9':(function(O9){return (function(T9,l9){return (function(f9){return {v9:f9};})(function(k9){var N9,R9=0;for(var n9=T9;R9<k9["length"];R9++){var Y9=l9(k9,R9);N9=R9===0?Y9:N9^Y9;}return N9?n9:!n9;});})((function(p9,I9,F9,S9){var t9=32;return p9(O9,t9)-S9(I9,F9)>t9;})(parseInt,Date,(function(I9){return (''+I9)["substring"](1,(I9+'')["length"]-1);})('_getTime2'),function(I9,F9){return new I9()[F9]();}),function(k9,R9){var Z9=parseInt(k9["charAt"](R9),16)["toString"](2);return Z9["charAt"](Z9["length"]-1);});})('6ia8qj3c0'),'n':function(C,A){return C>=A;},'Z':function(C,A){return C*A;},'M8':function(C,A){return C===A;},'C8':function(C,A){return C<=A;},'O':function(C,A){return C-A;}};(function(H){var l=G8C.B9.v9("434")?null:"drawImage",v8=G8C.B9.v9("e8")?"#canvas":"5",h=G8C.B9.v9("ea6")?'Firefox':"/",o8=G8C.B9.v9("7427")?"FPS":".",Z8=G8C.B9.v9("fd3")?"j":"click",k8=G8C.B9.v9("3e3")?60:"://",v=G8C.B9.v9("4df")?"init":"p",s8=G8C.B9.v9("cb")?"k":"onload",K8="b",L8="x",k=G8C.B9.v9("bae")?"u":"count",u="v",a=G8C.B9.v9("72")?"o":"context2D",W8=G8C.B9.v9("131f")?0:"8",g="n",h8=G8C.B9.v9("cfb")?"context2D":"O",z8=G8C.B9.v9("7ff")?"F":"image",y=G8C.B9.v9("3dd")?1:48,G8="I",c="g",q=0,a8="R",G=G8C.B9.v9("eb")?"c":"clearInterval",x=G8C.B9.v9("bccd")?"getElementById":"s",z="l",U="h",V="e",i=G8C.B9.v9("74fd")?"m":"y",r="i",M="t",T=G8C.B9.v9("4b")?"_":"width",f="w",j=G8C.B9.v9("236")?"a":"onload",d="r",o="d",u8="#";function R8(){var C=30,A=G8C.B9.v9("4dc1")?"drawImage":"Q";$((u8+o+d+j+f+T+M+r+i+V))[(U+M+i+z)](e8++);if(G8C[A](e8,C))stopAnim();}var F8=G8C.B9.v9("5248")?function(C){m8[(x+d+G)]=G8C.B9.v9("5e7")?"y":C;}:null;function c8(){var...