JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop Example</title>
</head>
<body>
<div id="drag-element" draggable="true" style="width: 100px; height: 100px; background-color: red; position: absolute; top: 50px; left: 50px;"></div>
<p>Mouse position: <span id="mouse-position"></span></p>
<script>
var dragElement = document.getElementById("drag-element");
var mousePosition = document.getElementById("mouse-position");

dragElement.addEventListener("drag", function(event) {
    var currentMouseX = event.clientX;
    var currentMouseY = event.clientY;

    mousePosition.innerHTML = "X: " + currentMouseX + ", Y: " + currentMouseY;
});
</script>
</body>
</html>