JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/test-virlan/jquery.cropit.js"></script>
<div class="image-editor">
<div class="buttons-container">
        <ul>
          <li>
          <input type="file" class="btn default sml alone cropit-image-input" style="width: 150px;" accept="image/*"></li>
          </ul>
          </div>
    <div class="preview-wrapper">
        <div class="cropit-image-preview-container">
            <div class="cropit-image-preview">
              <div class="spinner"><div class="spinner-dot"></div><div class="spinner-dot"></div><div class="spinner-dot"></div></div>
              <div class="error-msg"></div>
            </div>
        </div>
    </div>
    <div class="image-size-label">
        Resize image
    </div>
    <input type="range" class="cropit-image-zoom-input">

    <label for="image_name">Image Name:</label><br /><br />
    <input type="text" id="image_name" placeholder="Insert a name" value="Sebastian" />
    </div>

CSS

.cropit-image-preview {
        border: 1px solid #eee;
        width: 500px;
        height: 500px;
        cursor: move;
        box-sizing: border-box;
        position: relative;
    }

    .cropit-image-background {
        opacity: .2;
        cursor: auto;
    }

    .image-size-label {
        margin-top: 25px;
    }

    .image-editor input {
        display: block;
        border-color: transparent;
        box-shadow: none !important;
        margin-bottom: 20px;
        background-color: transparent;
        padding: 0;
    }

    .export {
        margin-top: 10px;
    }

    .cropit-image-input{
        margin-bottom: 10px;
    }

    input {
      /* Use relative position to prevent from being covered by image background */
      position: relative;
      z-index: 10;
      display: block;
      padding: 0;
    }
    .buttons-container {
      float: right;
      z-index: 10;
      position: relative;
    }
    .buttons-container ul {
      list-style-type: none;
    }

    .buttons-container ul li a {
      width: 150px;
      text-align: center;
    }

    .hide{
      display: none;
    }

    #category{
      margin: 10px;
      width: 165px;
    }

    #loading{
      text-align: center;
    }
    .message_image {
        color: #31708f;
        background-color: #d9edf7;
        border-color: #bce8f1;
        padding: 15px;
        margin: 10px;
        border: 1px solid transparent;
        border-radius: 4px;
    }
    .add_image {
        position: absolute;
        right: 0;
        top: -25px;
        font-size: 50px;
    }
    .add_image a {
        color: #087F94;
    }
    .add_image a span{
        display: none;
    }
    .add_image a:hover {
        text-decoration: none;
    }
    .add_image a:hover span{
        font-size: 15px;
        display: inline-block;
        text-transform: uppercase;
        position: relative;
        top: -10px;
    }
    #image_name {

        width: 486px;
        height: 22px;
    }

   ...

JavaScript

jQuery.noConflict();
(function() {
    var b;
    b = function(a) {
        return 1 === a.code ? (this.find(".error-msg").text("Please use an image that's at least " + this.outerWidth() + "px in width and " + this.outerHeight() + "px in height."),
                this.addClass("has-error"),
                window.setTimeout(function(a) {
                    return function() {
                        console.log(img);
                        return a.removeClass("has-error")
                    }
                }
                (this), 3e3)) : void 0
    }
    ,
    function() {
        var f;
        return f = jQuery(".image-editor"),
                f.cropit({
                    imageBackgroundBorderWidth: 70,
                    imageBackground: true,
                    imageState: {
                        src: 'http://shackmanlab.org/wp-content/uploads/2013/07/person-placeholder.jpg'
                    },
                    onImageError: b.bind(f.find(".cropit-image-preview")),
                    $fileInput: jQuery("dummy-file-input")
                })
    }
    ()
}
).call(this);


jQuery(document).ready(function() {

        limitsize = 15;

        jQuery('.cropit-image-input').bind('change', function() {

            image = this.files[0];

            if((image.size / (1024*1024)) > limitsize) {
                jQuery('.image-editor').find(".error-msg").text("Please use an image smaller than 10 MB");
                jQuery('.image-editor').addClass("has-error");
                window.setTimeout(function () {
                    jQuery('.image-editor').removeClass("has-error")

                }, 3e3);

            } else {
            	var reader = new FileReader();
              reader.readAsDataURL(image);
              reader.addEventListener("loadend", function() {
              	jQuery(".image-editor").cropit("imageSrc", reader.result);
              });
            }
        });
});