JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pnlContainer" class="container">
        <img id="cropbox" src='http://i.imgur.com/RGSn9.jpg' />
       
       <div class="dragDiv" id="dragDiv">
              <div id="header" class="ui-widget-header handler"><a href="#" onclick="$('#dragDiv').hide();" style="float: right;">X</a></div>
        <div style="width: 100%;height: 90%;position:absolute;top:20px;z-index:10" id="inDragDiv">
        <textarea  style="z-index:11;width:100%;height:100%;background-color:Transparent;font-family:Arial;font-size:11pt;border: 0px;color: white;" id="Text" name="Text"></textarea>
        </div>
        </div>
</div>

CSS

#dragDiv {
        width:400px;
        background-color: transparent;
        border:2px solid #CCCCCC;
        position:relative;
        left:0px;
        top:0px;
        padding:0px;
        margin:0px;
        height:50px;
        z-index: :9;
        }
        
    #cropbox {
        position: absolute;
        top: 2px;
        left: 2px;
        z-index: :997;
        padding:3px;
           border:2px solid #CCCCCC;
        }
        
        #Text{
        z-index: :1000;
        }

 .handler{
            float: left;
            background-color:#B2D3F5;
            padding:0px;
            margin:0px;
            cursor:move;
            width:100%;
            
        }

JavaScript

$("#dragDiv").resizable({
                       handles: 'e,w,s,n,se'       
               });


 jQuery( "#dragDiv" ).draggable({ containment: "#cropbox" });