JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<div id="grid">
</div>

CSS

#grid {
    background: #ddd;
    height: 300px;
    margin: 24px;
    position: relative;
    width: 300px;
}
#unit {
    background: #07a;
    border-radius: 4px;
    height: 8px;
    position: absolute;
    width: 8px;
}

JavaScript

var grid = document.getElementById('grid');

grid.onclick = function () {
    alert(this.offsetLeft);
};

function Unit() {
    var el = document.createElement('div');
    el.setAttribute('id', 'unit');
    grid.appendChild(el);
    
    function moveX(position) {
        if (position > el.style.left) {
            
        } else {
        }
    }
    
    this.moveTo = function (x, y) {
        el.style.left = x + 'px';
        el.style.top = (el.parentNode.offsetHeight - y) + 'px';
    }
}

var u = new Unit();

u.moveTo(100, 200);