JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<img class="croppable" data-id="38271" src="http://blog.internetnews.com/skerner/smk/testpilot.png"/>

CSS

.cropper {
    opacity: .4;
    background: #222;
    border: 2px solid #000;
}

.croppable-container {
    border: 2px solid #333;   
}

JavaScript

(function($) {
    $.fn.croppable = function(settings) {
        settings = settings || {
            square: 50,
            default: 'middle',
            id: $(this).data("id"),
            success: null
        };
        
        var position = {
            x: settings.default == 'middle' ? ($(this).width() / 2) - (settings.square / 2) : 0 ,
            y: settings.default == 'middle' ? ($(this).height() / 2) - (settings.square / 2) : 0
        };
        
        $(this).wrap("<div class='croppable-container' style='position: relative;' />");
        
        var cropper = $("<div style='position: absolute; top: " + position.y + "px; left: " + position.x + "px; height: " + settings.square + "px; width: " + settings.square + "px;' class='cropper' />");
        $(this).before(cropper);
        
        var save = $("<input type='button' value='Crop Selection'/>");
        save.click(function () {
           $.post("/your/service/location", 
                  {
                      img: id,
                      x: cropper.position().left,
                      y: cropper.position().top,
                      height: settings.square
                  },
                  function (data) {
                      if (settings.success != null) {
                          settings.success(data);
                      }
                  }
            );
        });
        
        $(this).parent().width($(this).width());
        $(this).parent().height($(this).height());
        cropper.draggable({containment: "parent"});
        
        $(this).parent().after(save);
    };
})(jQuery);

$(".croppable").croppable();