JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-2.1.1.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<div id="myWidget" class="ui-widget">
  <div class="left column">
    <div class="ui-widget-header ui-corner-top">
      A. Dedication Text
    </div>
    <div class="ui-widget-content ui-corner-bottom">
      <div class="disp_dedi">
        <form id="dedi_form">
          <input type="text" id="dedi_text" placeholder="Dedication">
          <select id="dedi_font">
            <option>Times New Roman</option>
            <option>Georgia</option>
            <option>Arial</option>
            <option>Courier New</option>
          </select>
          <select id="dedi_font_size">
            <option>11</option>
            <option>12</option>
            <option>14</option>
            <option selected>18</option>
            <option>24</option>
            <option>36</option>
          </select>
          <select id="dedi_font_align">
            <option>Left</option>
            <option>Center</option>
            <option>Right</option>
          </select>
          <a href="" id="add_dedi_text" class="button default">Add</a>
          <a href="" id="clear_dedi_text" class="button">Clear</a>
        </form>
      </div>
    </div>
    <div class="ui-widget-header ui-corner-top">
      B. Figures
    </div>
    <div class="ui-widget-content ui-corner-bottom">
      <ul id="fig_list">
        <li>
          <div class="fig_image" data-image-src="https://vignette1.wikia.nocookie.net/doratheexplorer/images/8/88/Dora_Exploradora_(11).png/revision/latest?cb=20130928190347" title="Dora">
          </div>
        </li>
        <li>
          <div class="fig_image"...

CSS

body {
  background: #fff;
}

#myWidget {
  width: 1110px;
  margin: 0 auto;
}

#myWidget:after {
  content: "";
  display: table;
  clear: both;
}

#myWidget div.left {
  padding-right: 0;
  margin-right: 0;
  float: left;
  width: 500px;
}

#myWidget div.left .ui-widget-content {
  margin-bottom: 4px;
}

#myWidget div.right {
  float: right;
  width: 606px;
}

#myWidget input,
#myWidget select {
  border: 1px solid #ccc;
  height: 25px;
  padding: 2px;
  border-radius: 4px;
  font-size: 1em;
}

#myWidget select {
  height: 30px;
}

#myWidget .button {
  padding: 0.2em 0.3em;
  margin: 4px 1px;
}

#myWidget .button.default {
  font-weight: bold;
  border-color: #9f9f9f;
}

#myWidget .ui-widget-header {
  padding: 0.25em 0;
  padding-left: 20px;
}

#myWidget .right .ui-widget-header {
  padding: 0.25em 0;
  text-align: center;
}

#myWidget .ui-widget-content {
  padding: 5px;
}

#myWidget #fig_list {
  list-style: none;
  height: 60px;
  padding: 0;
  margin: 0;
}

#myWidget #fig_list li {
  float: left;
}

#myWidget .fig_image {
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 50px;
  margin-right: 7px;
  padding: 2px;
}

#myWidget .disp_temp {
  width: 598px;
  height: 398px;
  border: 1px solid #eee;
  position: relative;
}

#myWidget .disp_temp span {
  position: absolute;
}

#myWidget .disp_temp span.top {
  top: 0;
}

#myWidget .disp_temp span.right {
  right: 0;
}

.no-title .ui-dialog-titlebar {
  display: none;
}

.small-title .ui-dialog-titlebar {
  height: 1.25em;
  font-size: 0.75em
}

.small-title .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button {
  padding: 0.125em;
}

JavaScript

$(function() {
  // Init
  var $imageContent = $([]);
  $(".button").button();
  $("#card_modal").dialog({
    autoOpen: false,
    dialogClass: "small-title",
    modal: true,
    width: 640,
    height: 540,
    buttons: [{
      text: "Save",
    }, {
      text: "Close",
      click: function() {
        $(this).dialog("close");
      }
    }]
  });

  $(".fig_image").each(function() {
    var figSrc = $(this).data("image-src");
    $(this).css("background-image", "url('" + figSrc + "')");
  }).draggable({
    containment: "#myWidget",
    helper: "clone",
    cursor: "move"
  });

  $("#disp_card").droppable({
    accept: ".fig_image",
    drop: function(e, ui) {
      console.log("Receving: ", ui.helper);
      if (!ui.helper.hasClass("placed")) {
        addFigure(ui.helper);
      }
    }
  });

  // Utility Functions
  function addDed(txt) {
    var $close = $("<span>", {
      class: "floating top right ui-icon ui-icon-close",
      title: "Remove Image"
    }).click(function(e) {
      removeItem($(e.target).parent());
    });
    var $dedTxt = $("<div>", {
      id: "ded-" + ($(".text").length + 1),
      class: "placed text"
    }).html(txt).append($close).css({
      position: "absolute",
      top: "20px",
      left: "20px",
      "font-size": $("#dedi_font_size option:selected").val() + "pt",
      "font-family": $("#dedi_font option:selected").val(),
      "text-align": $("#dedi_font_align option:selected").val(),
      "min-width": "1em",
      "min-height": "20px",
      "padding-right": "16px"
    });
    makeDrag($dedTxt);
    makeResize($dedTxt);
    $dedTxt.disableSelection();
    $dedTxt.appendTo($("#disp_card")).fadeIn();
  }

  function addFigure($item) {
    var dropPos = $item.position();
    var dropSrc = $item.data("image-src");
    var dropPlace = {
      top: dropPos.top - $("#disp_card").position().top,
      left: dropPos.left - $("#disp_card").position().left
    };
    var $close = $("<span>", {
      class: "floating top...