JSFiddle - React, Tailwind, and code Playground

HTML

CLICK AND DRAG INSIDE
<div id="contentframe" class="contentframe" style="height:400px;width:400px;background-color:#444;padding:10px;">
<div id="selector" class="selectiondiv"></div>    
</div>

CSS

.selectiondiv{
    border:1px dashed black;
    background:#D9FF00;
    opacity:0.4;
    filter:alpha(opacity=40);
    margin:0px;
    padding:0px;
    display:none;
}

JavaScript

// USE DISABLETEXTSELECT.JS -> http://code.jdempster.com/


// Load when page is ready
(function( $ ){
    // Some settings -> div-variables
    var settings = {
      'ContentFrameSelector'        : '#contentframe',
      'SelectionSelector'           : '#selector'
    };
    
    // methods
    var methods = {
    init : function( options ) { if ( options ) {$.extend( settings, options );}},
    // Rectangle Selection Method
    bindSelectRectangle : function ( e ){
        // Bind all events to RSEL Methods
        $(settings.ContentFrameSelector).on("mousedown", RSEL.mousedown , e);
        $(settings.ContentFrameSelector).on("mouseup",   RSEL.mouseup, e);
        $(settings.ContentFrameSelector).on("mousemove", RSEL.mousemove, e);
        $(settings.SelectionSelector).on("mousemove",    RSEL.mousemove , e);
        $(settings.SelectionSelector).on("mouseup",      RSEL.mouseup ,e);
        $(settings.SelectionSelector).on("mousedown",    RSEL.mousedown ,e);
    }
  };      

    // EEPG SELECT RECTANGLE
    var RSEL = {
        // Mousebuttonstate
        'StateMousedown' : false,'StateMouseup' : false,
        // Position of the mouse
        'x1' : 0, 'x2' : 0, 'y1' : 0, 'y2' : 0,
        //Position of the div
        'top' : 0, 'left' : 0, 'width' : 0, 'height' : 0,
        
        // Mousedown Event
        mousedown : function (e) {
            // Hide the Rectangle (show on mouse move first)
            $(settings.SelectionSelector).hide();
            // Set Mousebutton state
            RSEL.StateMousedown = true;
            RSEL.StateMouseup = false;
            // Set x&y position of mouse
            RSEL.x1 = e.pageX;
            RSEL.y1 = e.pageY;
        },
        mouseup : function (e) {
            // Set Mousebutton state
            RSEL.StateMousedown = false;
            RSEL.StateMouseup = true;
            // Hide the rectangle on mouse up
            $(settings.SelectionSelector).hide();
        },
        mousemove : function (e) {
...