JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
  .full{
    height: 100%;
    width: 100%;
  }
  .overflo{
    height: 500px;
  }
  .rotate{
    width: 300px
  }
  .draggable { width: 90px; height: 90px border:none; background-color: transparent; background-position: top left; position: absolute;border: none; }
  #containment-wrapper { width: 50%; height:500px; border:2px solid #ccc; z-index: -999; padding: 8px; background-color: white; overflow: hidden}
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
  <script type="text/javascript" src="js/jquery.plugin.html2canvas.js"></script>
  <script>
    function clearBorders(){
        $("#containment-wrapper > div").css("border","none");
    }
    function capture() {
      clearBorders();
        html2canvas($('#containment-wrapper'),{
          useCORS: true,
          letterRendering: true,

            onrendered: function (canvas) {
               document.body.appendChild(canvas);
            }
        });
    }
    function decodeMatrix(matrixValue){
      var values = matrixValue.split('(')[1];
          values = values.split(')')[0];
          values = values.split(',');
      var a = values[0];
      var b = values[1];
      var c = values[2];
      var d = values[3];
      var scale = Math.sqrt(a*a + b*b);
      var sin = b/scale;
      var angle = Math.round(Math.asin(sin) * (180/Math.PI));
      return angle;
    }
  $(document).ready(function(){

    //z-index for comic elements
    var z_index = 1;
    //selected div element
    var selectedDiv = "";
    var containerWidth =...