JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css">
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>
         <img id="cropbox" src="http://deepliquid.com/projects/Jcrop/demos/demo_files/sago.jpg" style="position: absolute; left: 0px: right: 0px;" />
<img id="transparent" src="http://www.golivetutor.com/download/spacer.gif" style="width: 100px; height: 100px;position: absolute; left: 0px: right: 0px;"/>

CSS

.jcxxrop-holder {
    opacity: 0.5;
}

JavaScript

jQuery(function($){

    var jcrop_api;

    $('#transparent').Jcrop({
      onChange:   showCoords

    },function(){
      jcrop_api = this;
    });

 //jcrop_api.setSelect([100,100,200,200]);

  });

  function showCoords(c)
  {

    $('#map_x').val(c.x);
    $('#map_y').val(c.y);
    $('#map_x2').val(c.x2);
    $('#map_y2').val(c.y2);

  };