JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
<script src="http://acornejo.github.io/jquery-cropbox/jquery.cropbox.js"></script>
<link rel="stylesheet" href="http://acornejo.github.io/jquery-cropbox/jquery.cropbox.css">
<img id="cropimage" alt="" src="http://acornejo.github.io/jquery-cropbox/img.jpg" />
<div id="results"> <b>X</b>: <span class="cropX"></span>
 <b>Y</b>: <span class="cropY"></span>
 <b>W</b>: <span class="cropW"></span>
 <b>H</b>: <span class="cropH"></span>

</div>

JavaScript

$(function () {
    var r = $('#results'),
        x = $('.cropX', r),
        y = $('.cropY', r),
        w = $('.cropW', r),
        h = $('.cropH', r);
    $('#cropimage').cropbox({
        width: 200,
        height: 200
    }).on('cropbox', function (event, results, img) {
        x.text(results.cropX);
        y.text(results.cropY);
        w.text(results.cropW);
        h.text(results.cropH);
    });
});