JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.12/css/jquery.Jcrop.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.12/js/jquery.Jcrop.js"></script>
<form method="post" enctype="multipart/form-data" action="#">
<input type="file" id="my_file" accept="image/*">
<input type="hidden" id="x">
<input type="hidden" id="y">
<input type="hidden" id="w">
<input type="hidden" id="h">
<input type="submit" value="Upload">
</form>
<div id="image_prev_container">
    <img src="#" alt="" id="image_prev">
</div>

CSS

#image_prev_container {
    width:72%;
    border : 1px solid #555555;
    padding:5px;
}

JavaScript

$('#my_file').on('change', function() {
    var file_name = $(this).val();
    if(file_name.length > 0) {
      addJcrop(this);
    }
  });
  var addJcrop = function(input) {
    if ($('#image_prev').data('Jcrop')) {
      // if need destroy jcrop or its created dom element here
      $('#image_prev').data('Jcrop').destroy();
    }
     
    // this will add the src in image_prev as uploaded
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $("#image_prev").attr('src', e.target.result);
        var box_width = $('#image_prev_container').width();
        $('#image_prev').Jcrop({
          setSelect: [0, 0, 320],
          minSize: [52, 140],
          aspectRatio: 4/1,
          onSelect: getCoordinates,
          onChange: getCoordinates,
          keySupport: false,
          boxWidth: box_width
         });
      }
      reader.readAsDataURL(input.files[0]);
    }
  }
  var getCoordinates = function(c){
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
  };