JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "canvasDiv">
    <div id = "template"></div>     
</div>

CSS

#canvasDiv { 
    width: 30%;
    height: 400px;  
    cursor:crosshair;  
    background-color: #458B00; 
    position: relative;
    margin-left: auto; 
    margin-right: auto; 
}
#template {
    width: 30px;
    height: 30px;
    background-color: red;
    z-index: 5; 
    position: absolute;  
    overflow: hidden;   
    display: none;
    background-color: #00FFEF;  
}

JavaScript

$('#canvasDiv').mousedown(function(event) {    
        if(!event) event = window.event;  
        
        var x = event.pageX;  
        var y = event.pageY;   
        var canvasPos = $(this).offset();
        var styles = {
                "left" : x - canvasPos.left, 
                "top" : y - canvasPos.top
        };
        $("#template").hide();
        var template = $("#template");
        $(template).css( styles ) 
        .show();  
        $(template).remove(); 
        $(this).append(template); 
    });