JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<div class="cord">
    X: 0 Y: 0
</div>
<div id="demo-box">
    
</div>

CSS

#demo-box{
		height: 300px;
		width: 300px;
		background-color: red;
		position: relative;
	}
#demo-box:hover{
    cursor:crosshair;
}
	.tag{
		position: absolute;
		width: 15px;
		height: 15px;
		background-color: green;
	}

JavaScript

//Get coordonates
		var relativeX = 0;
		var relativeY = 0;
		$("#demo-box").mousemove(function(e) {

		  var offset = $(this).offset();
		  relativeX = (e.pageX - offset.left);
		  relativeY = (e.pageY - offset.top);

		  $('.cord').html("X: " + relativeX + "  Y: " + relativeY);
		});
		// add tag
	    $('#demo-box').click(function() {
	        //position box to center ( the green box is 15 pixels and we need to position this box in the midle of the selected position as an x markes the spot )
            relativeX = relativeX - (15 / 2); // from left
            relativeY = relativeY - (15 / 2); // from top
	        $('#demo-box').append('<div style="left:' + relativeX + 'px; top:' + relativeY + 'px" class="tag"></div>');
	    });