JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div class="wrapper">
    <div class="main">
        <div class="rectangle top left"></div>
        <div class="rectangle top right"></div>
        <div class="rectangle bottom left"></div>
        <div class="rectangle bottom right"></div>
    </div>
    <br>
        <div class="main">
        <div class="rectangle top left"></div>
        <div class="rectangle top right"></div>
        <div class="rectangle bottom left"></div>
        <div class="rectangle bottom right"></div>
    </div>
</div>

CSS

body{background:whitesmoke;}
.wrapper{
    margin: 50px; 
}

.main{
    border: 1px solid black;
    
    width: 100px;
    height: 100px;
    position: relative;
    
    top: 0;
    left: 0;
}

.top{ top: -10px;}
.bottom{ bottom: -10px;}
.left{ left: -10px;}
.right{ right: -10px;}

.rectangle{
    border: 1px solid black; 
    
    width: 20px;
    height: 20px;
    position: absolute;
    background: white;
}

.main,
.rectangle{
    cursor: pointer;
}

JavaScript

function find(selector, context) {
    context = context || document;
    return context.querySelector(selector);
}

var mainRect = find('.main'),
    topLeft = find('.top.left'),
    topRight = find('.top.right'),
    bottomLeft = find('.bottom.left'),
    bottomRight = find('.bottom.right');
/*
topLeft.onmousedown = function(){
    event = event || window.event;
    var clickedMainRect = event.target.parentNode,
        clickedX = event.clientX,
        clickedY = event.clientY,
        currComputedStyles = window.getComputedStyle(clickedMainRect),
        currTop = +currComputedStyles.top.replace('px',''),
        currLeft = +currComputedStyles.left.replace('px',''),
        clickedWidth = +currComputedStyles.width.replace('px',''),
        clickedHeight = +currComputedStyles.height.replace('px','');
    
    document.body.onmousemove = function(){
        var event = event || window.event,
            currX = event.clientX,
            currY = event.clientY,
            deltaX = clickedX - currX,
            deltaY = clickedY - currY,
            currWidth = +currComputedStyles.width.replace('px',''),
            currHeight = +currComputedStyles.height.replace('px',''),
            newWidth = clickedWidth + deltaX,
            newHeight = clickedHeight + deltaY;
        
        //console.log('deltaX ', deltaX,'deltaY ', deltaY);
        //console.log(currWidth)
        if (newWidth >= 24){
            clickedMainRect.style.width = newWidth + 'px';
            clickedMainRect.style.left = currLeft - deltaX + 'px';
        }
        if (newHeight >= 24){
            clickedMainRect.style.height = newHeight + 'px';
            clickedMainRect.style.top = currTop - deltaY + 'px';
        }        
    };
    
    //console.log(event.clientX, event.clientY, clickedMainRect);
};
*/
//mainRect.onmousedown 
document.body.onmousedown = function(){
    event = event || window.event;
    
    var target = event.target || event.srcElement,
        clickedMainRect,
     ...