JSFiddle - React, Tailwind, and code Playground

by LiebeMachen

HTML

<img src="https://i.imgur.com/NYj3pZh.jpg" id="target">

CSS

/*! Jcrop.css v2.0.4 - build: 20151117
 *  Copyright 2008-2015 Tapmodo Interactive LLC
 *  Free software under MIT License
 **/

/*
  The outer-most container in a typical Jcrop instance
  If you are having difficulty with formatting related to styles
  on a parent element, place any fixes here or in a like selector

  You can also style this element if you want to add a border, etc
  A better method for styling can be seen below with .jcrop-light
  (Add a class to the holder and style elements for that extended class)
*/
.jcrop-active {
  direction: ltr;
  text-align: left;
  /* IE10 touch compatibility */

  -ms-touch-action: none;
}
.jcrop-dragging {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.jcrop-selection {
  z-index: 2;
}
.jcrop-selection.jcrop-current {
  z-index: 4;
}
/* Selection Borders */
.jcrop-border {
  background: #ffffff url("Jcrop.gif");
  line-height: 1px !important;
  font-size: 0 !important;
  overflow: hidden;
  position: absolute;
  filter: alpha(opacity=50) !important;
  opacity: 0.5 !important;
}
.jcrop-border.ord-w,
.jcrop-border.ord-e,
.jcrop-border.ord-n {
  top: 0px;
}
.jcrop-border.ord-n,
.jcrop-border.ord-s {
  width: 100%;
  height: 1px !important;
}
.jcrop-border.ord-w,
.jcrop-border.ord-e {
  height: 100%;
  width: 1px !important;
}
.jcrop-border.ord-e {
  right: -1px;
}
.jcrop-border.ord-n {
  top: -1px;
}
.jcrop-border.ord-w {
  left: -1px;
}
.jcrop-border.ord-s {
  bottom: -1px;
}
.jcrop-selection {
  position: absolute;
}
.jcrop-box {
  z-index: 2;
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0;
}
.jcrop-box:hover {
  background: none;
}
.jcrop-box:active {
  background: none;
}
.jcrop-box:focus {
  outline: 1px rgba(128, 128, 128, 0.65) dotted;
}
.jcrop-active,
.jcrop-box {
  position: relative;
}
.jcrop-box {
  width: 100%;
  height: 100%;
  cursor: move;
}
/* Selection Handles */
.jcrop-handle {
  z-index: 4;
 ...

JavaScript

/*! Jcrop.js v2.0.4 - build: 20151117
 *  @copyright 2008-2015 Tapmodo Interactive LLC
 *  @license Free software under MIT License
 *  @website http://jcrop.org/
 **/
(function($){
  'use strict';

  // Jcrop constructor
  var Jcrop = function(element,opt){
    var _ua = navigator.userAgent.toLowerCase();

    this.opt = $.extend({},Jcrop.defaults,opt || {});

    this.container = $(element);

    this.opt.is_msie = /msie/.test(_ua);
    this.opt.is_ie_lt9 = /msie [1-8]\./.test(_ua);

    this.container.addClass(this.opt.css_container);

    this.ui = {};
    this.state = null;
    this.ui.multi = [];
    this.ui.selection = null;
    this.filter = {};

    this.init();
    this.setOptions(opt);
    this.applySizeConstraints();
    this.container.trigger('cropinit',this);
      
    // IE<9 doesn't work if mouse events are attached to window
    if (this.opt.is_ie_lt9)
      this.opt.dragEventTarget = document.body;
  };


  // Jcrop static functions
  $.extend(Jcrop,{
    component: { },
    filter: { },
    stage: { },
    registerComponent: function(name,component){
      Jcrop.component[name] = component;
    },
    registerFilter: function(name,filter){
      Jcrop.filter[name] = filter;
    },
    registerStageType: function(name,stage){
      Jcrop.stage[name] = stage;
    },
    // attach: function(element,opt){{{
    attach: function(element,opt){
      var obj = new $.Jcrop(element,opt);
      return obj;
    },
    // }}}
    // imgCopy: function(imgel){{{
    imgCopy: function(imgel){
      var img = new Image;
      img.src = imgel.src;
      return img;
    },
    // }}}
    // imageClone: function(imgel){{{
    imageClone: function(imgel){
      return $.Jcrop.supportsCanvas?
        Jcrop.canvasClone(imgel):
        Jcrop.imgCopy(imgel);
    },
    // }}}
    // canvasClone: function(imgel){{{
    canvasClone: function(imgel){
      var canvas = document.createElement('canvas'),
          ctx = canvas.getContext('2d');

     ...