JSFiddle - React, Tailwind, and code Playground

by panino

HTML

<img id="arw"...

CSS

body{
  text-align:center
}

JavaScript

/*---- funciones auxiliares---*/
//DOMReady
var DR=function(f){
    if(document.addEventListener){
        var func=function(){f();document.removeEventListener('DOMContentLoaded',func,false);}
        document.addEventListener('DOMContentLoaded',func,false);
    }else{
        function r(f){/in/.test(document.readyState)?setTimeout(function(){r(f);},9):f();};
        r(f);
    }
}
function clearSelection() {
    if(window.permSel)return;
    var sel ;
    if(document.selection && document.selection.empty){
        try{document.selection.empty() ;}catch(err){}
    } else if(window.getSelection) {
        sel=window.getSelection();
    if(sel && sel.removeAllRanges)
        sel.removeAllRanges() ;
    }
}
function cancelEvent(e){
    if(e && e.preventDefault)
        e.preventDefault();
    else if(window.event)
        window.event.returnValue=false;
}
/*---- cropeo---*/
var crop=(
function(){
    var cur='';
    var coords={x:0,y:0};
    var coords2={x:0,y:0};
    var origen={x:0,y:0};
    var origen2={x:0,y:0};
    var renderizar=0;
    var recorte=0;
    var f=document.createDocumentFragment();
    var l=document.createElement('div');
    var r=document.createElement('div');
    var t=document.createElement('div');
    var b=document.createElement('div');
    var over=document.createElement('div');
    l.style.borderLeft=r.style.borderLeft='1px dashed white';
    t.style.borderBottom=b.style.borderBottom='1px dashed white';
    over.style.position=l.style.position=r.style.position=t.style.position=b.style.position='absolute';
    over.style.top='-15000px';
    over.style.zIndex=100;
    l.style.width=r.style.width=t.style.width=b.style.width=l.style.height=r.style.height=t.style.height=b.style.height=0;
    f.appendChild(l);
    f.appendChild(r);
    f.appendChild(t);
    f.appendChild(b);
    over.appendChild(f);
    DR(function(){
        document.body.appendChild(over);            
    });
    var mp={
        iniciar:function(o){
            crop.target=o;
...