JSFiddle - React, Tailwind, and code Playground

HTML

<div id="area">
    <div id="selection"></div>
</div>
<div id="log"></div>

Mouse down and Drag inside black box

CSS

#area {
    width:400px;
    height:200px;
    background:#000;
    position:relative;
    cursor:pointer;
}
#selection {
    position:absolute;
    left:0px;
    top:0px;
    width:0px;
    height:0px;
    background:rgba(62,120,255,0.5);
    border:1px solid #3399FF;    
}

JavaScript

$("#area").mousedown(function(e){
    if(e.target.id != "area") return;
    $(this).data("tracking",true);
    $(this).data("start",{x:e.offsetX,y:e.offsetY});
    $("#selection").css({left:e.offsetX+"px",
                      top:e.offsetY+"px",
                         width:"0px",
                         height:"0px"});
}).mousemove(function(e){
    if($(this).data("tracking")){
        $("#log").html("X:"+e.offsetX+", Y:"+e.offsetY);
        var start = $(this).data("start");
        var w = Math.abs(e.offsetX-start.x)-5;
        var h = Math.abs(e.offsetY-start.y)-5;
        $("#selection").css({width:w+"px",
                          height:h+"px"});
    }
}).mouseup(function(e){
    $(this).data("tracking",false);  
});