JSFiddle - React, Tailwind, and code Playground

HTML

<div id="desktop" onmousedown="initRect(event);">


`Click and drag inside this div
  <div id="userBox"></div>

</div>

CSS

#desktop {
	height: 500px;
	width: 500px;
	margin: 0px;
	padding: 0px;
	position: absolute;
  background-color: blue;
  color: whitesmoke;
}
#userBox {
  background-color: yellow;
  position: absolute;
}

JavaScript

// The resizable box
	var clientBox = document.getElementById("userBox");

	function initRect(event) {
		window.addEventListener("mousemove", drawRect);
		window.addEventListener("mouseup", dstryRect);
		clientBox.style.display = "block";   // Hideen until click detected
		clientBox.style.top  = event.clientY + "px";
		clientBox.style.left = event.clientX + "px";
	}
	function drawRect(event) {
		var newX = event.clientX - clientBox.offsetLeft;
		clientBox.style.width = newX + "px";
		var newY = event.clientY - clientBox.offsetTop;
		clientBox.style.height = newY + "px";
	}
	function dstryRect() {
		window.removeEventListener("mousemove", drawRect);
		window.removeEventListener("mouseup", dstryRect);
		clientBox.style.display = "none";
		clientBox.style.height = "0px";
		clientBox.style.width = "0px";
	}