JSFiddle - React, Tailwind, and code Playground

HTML

<div id="game"><div id="overlay"></div></div>

CSS

body {
	margin: 0;
	padding: 0;
	height: 100%;
}
div {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
div#game {
	position: relative;
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: black;
}
div#overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
div#overlay div.window {
	/*display: none;*/
	position: absolute;
	background: gray;
	color: white;
	border: 6px outset #646464;
	pointer-events: visiblePainted;
}
div#overlay div.window div.itemSlot {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 5px;
	background: rgb(180, 180, 180);
	color: white;
	border: 2px inset #646464;
	pointer-events: visiblePainted;
}

JavaScript

var overlay = document.getElementById('overlay');
var dragging = null, offX = 0, offY = 0;

overlay.addEventListener('mousedown', function (event) {
    if (event.target.className.indexOf('draggable') >= 0) {
        dragging = event.target;
        offX = event.offsetX;
        offY = event.offsetY;
    }
});

document.addEventListener('mouseup', function (event) {
    dragging = null;
});

document.body.addEventListener('mousemove', function (event) {
    if (dragging) {
        // FIXME: Constrain drag to browser window size.
        dragging.style.top = (event.pageY-offY)+'px';
        dragging.style.left = (event.pageX-offX)+'px';
    }
});


function allowDrop (event) {
    event.preventDefault();
}

function drag (event) {
    event.dataTransfer.setData('Text',event.target.id);
}

function drop (event) {
    event.preventDefault();
    var element = document.getElementById(event.dataTransfer.getData('Text'));
    if (event.target != element)
        event.target.appendChild(element);
}

function createWindow (x, y, w, h) {
    var win = document.createElement('div');
    win.className = 'window draggable';
    win.style.top = y+'px';
    win.style.left = x+'px';
    win.style.width = w+'px';
    win.style.height = h+'px';
    overlay.appendChild(win);
    return win;
}
var playerWin = createWindow(50,50,432,432);
var equip = document.createElement('div');

for (var i = 0; i < 4; i++) {
    var slot = document.createElement('div');
    slot.className = 'itemSlot';
    slot.ondrop = drop;
    slot.ondragover = allowDrop;
    slot.style.position = 'absolute';
    slot.style.top = (27+i*54)+'px';
    slot.style.left = '20%';
    equip.appendChild(slot);
}

for (var i = 0; i < 4; i++) {
    var slot = document.createElement('div');
    slot.className = 'itemSlot';
    slot.ondrop = drop;
    slot.ondragover = allowDrop;
    slot.style.position = 'absolute';
    slot.style.top = (27+i*54)+'px';
    slot.style.right = '20%';
    equip.appendChild(slot);
}

var...