JSFiddle - React, Tailwind, and code Playground

by klodoma

HTML

<img src="https://wp.dev.mapps-video.com/wp-content/uploads/2018/05/mapps-logo-simple-white-h150.png" style="z-index: 102; top: 0px; opacity: 1; width: 400px; font-size: 13px; left: 0px; white-space: nowrap; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);" id="" class="ui-selected ls-l ui-draggable ui-draggable-handle">

CSS

.ui-selected {
  z-index: 999 !important; }

.ls-preview-wrapper.hide-selection .ui-selectable-helper,
.ls-preview-wrapper.hide-selection .ui-selected-helper {
  display: none !important; }

.ui-selectable-helper,
.ui-selected-helper {
  position: absolute;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 1px dotted #fff;
  z-index: 9999;
  -webkit-box-shadow: 0 0 0 1px #000;
  -moz-box-shadow: 0 0 0 1px #000;
  box-shadow: 0 0 0 1px #000; }

.ui-selected-helper {
  display: none;
  z-index: 9999;
  outline: none;
  pointer-events: none; }

.ui-selected-helper:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  outline: 1px dashed #fff; }

.ui-selected-helper:after {
  display: none;
  content: attr(data-info-0) "\a" attr(data-info-1);
  white-space: pre;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.8);
  font-family: "Arial";
  font-size: 9px;
  padding: 2px; }

.ui-resizable {
  position: absolute !important; }

.ui-resizable-resizing.ui-selected-helper:after,
.ui-draggable-dragging ~ .ui-selected-helper:after {
  display: block; }

.ui-resizable-handle {
  pointer-events: all;
  position: absolute;
  width: 9px;
  height: 9px;
  font-size: 0; }

.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle,
.ui-resizable-disabled .ui-resizable-handle:after,
.ui-resizable-autohide .ui-resizable-handle:after {
  content: '';
  display: none !important; }

.ls-editing {
  outline: 1px dashed #333 !important;
  cursor: text !important;
  white-space: pre-wrap !important; }

.ls-editing:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  outline: 1px solid white; }

.ui-resizable-n {
  cursor: n-resize;
  width: 100%;
  height: 7px;
  top: -5px;
  left: 0; }

.ui-resizable-s {
  cursor: s-resize;
  width: 100%;
  height: 7px;
  bottom: -5px;
 ...

JavaScript

$('img').draggable({
    handle: 'rect'
}).resizable({
    //aspectRatio: 1.0
});