JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

CSS

html {
    width:100%;
    height:100%;
}

JavaScript

EventTarget.prototype.addEvent = function () {
    var args = [].slice.call(arguments);
    var remove = (function () {
        this.removeEventListener.apply(this, args);
    }).bind(this);
    this.addEventListener.apply(this, arguments);
    return remove;
};
var rect = function (x, y, x1, y1) {
    var span = document.createElement('span');
    span.style.position = 'absolute';
    span.style.border = '1px dashed red';
    span.style.top = Math.min(y, y1) + 'px';
    span.style.height = Math.max(y, y1) - Math.min(y, y1) + 'px';
    span.style.left = Math.min(x, x1) + 'px';
    span.style.width = Math.max(x, x1) - Math.min(x, x1) + 'px';
    document.body.appendChild(span);

    var s = span.cloneNode(true);
    document.body.appendChild(s);
    var borderradius = "50%";
    span.style['border-radius'] = borderradius;
    span.style['-moz-border-radius'] = borderradius;
        span.style['-webkit-border-radius'] = borderradius;
    span.style['-khtml-border-radius'] = borderradius;
    return function(x2,y2){
        [s,span].forEach(function(e){(function(){   
    this.style.top = Math.min(y,y2)+'px';
    this.style.height = Math.max(y,y2)-Math.min(y,y2)+'px';
    this.style.left = Math.min(x,x2)+'px';
    this.style.width = Math.max(x,x2)-Math.min(x,x2)+'px';        
        }).call(e);});
    };
    
};
var down = addEvent('mousedown', function (e) {
    console.log('down');
    e.preventDefault();
    var r = rect(e.pageX,e.pageY,e.pageX,e.pageY);
    var move = addEvent('mousemove',function(m){r(m.pageX,m.pageY);});
    var up = addEvent('mouseup',function(m){r(m.pageX,m.pageY);move();up();});
    down();
});