JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

CSS

#container { width:100%; height:500px; border:1px solid black; background-color:#eee}
.mask {  position:absolute; border:2px solid red; background-color:#ccc }

JavaScript

$contenedor=$('#container');
$contenedor.xpos=null;
$contenedor.ypos=null;
$contenedor.capa=null;

$contenedor.on("mousedown", function(e){
    e.preventDefault();
    $contenedor.xpos= e.pageX;
    $contenedor.ypos= e.pageY;
    $contenedor.capa=$('<div/>').attr({
        'class':'mask'
    }).css({
        'display': 'none'
    });
    $contenedor.append($contenedor.capa);
});
$contenedor.on("mousemove", function(e){
    if ($contenedor.capa==null) return;
    e.preventDefault();
    var x = e.pageX;
    var y = e.pageY;
    $contenedor.capa.css({
        'left': Math.min($contenedor.xpos, x)+'px',
        'top': Math.min($contenedor.ypos, y)+'px',
        'width': Math.abs($contenedor.xpos-x)+'px',
        'height': Math.abs($contenedor.ypos-y)+'px',
        'display': 'block'
    });
});
$contenedor.on("mouseup", function(e){
    e.preventDefault();
    $contenedor.capa=null;    
    $contenedor.xpos= null;
    $contenedor.ypos= null;
});