JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<div data-bind="foreach: {data: templates, afterRender: makeDroppable } ">
  <div class="card">
    <div class="d-flex justify-content-between align-content-center">
      <textarea rows="10" style="height: auto" aria-label="Content" class="txtDropTarget form-control m-3" aria-describedby="Template Content" data-bind="textInput: content"></textarea>
      <div data-bind="html: content" class="m-3"></div>
    </div>
    <div class="d-flex justify-content-between align-content-center">
      <ul class="dragList nav" data-bind="foreach: { data: $parent.tags, afterRender: $root.makeDraggable }">
        <li data-bind="text: value" class="nav-item m-3 h5 move-pointer"></li>
      </ul>
    </div>
  </div>
</div>

CSS

.move-pointer {
  cursor: move;
}

JavaScript

(function() {
  'use strict';

  var data = JSON.stringify({
    "tags": [{
      "id": 1,
      "name": "HELPDESKPHONE",
      "value": "{{helpdeskphone}}",
      "description": null
    }, {
      "id": 3,
      "name": "HELPDESKEMAIL",
      "value": "{{helpdeskemail}}",
      "description": null
    }, {
      "id": 4,
      "name": "CODE",
      "value": "{{code}}",
      "description": null
    }, {
      "id": 7,
      "name": "CALLBACKURL",
      "value": "{{callbackurl}}",
      "description": null
    }],
    "templates": [{
      "id": 1,
      "key": "securitycode",
      "description": null,
      "content": "<p>Your credentials have been identified in the system and a request to authenticate your account by email has been made.</p><p>To continue the  2-Factor Authentication process, enter this single-use code on the verification page.</p>{{code}}<p>PLEASE NOTE THAT THIS CODE EXPIRES WITHIN 1 HOUR OF SENDING THIS EMAIL.</p><p>If you did not initiate this request, please contact the Helpdesk via email at {{helpdeskemail}} or by calling (toll-free) {{helpdeskphone}}</p>",
      "subject": "Security Code"
    }, {
      "id": 3,
      "key": "resetpassword",
      "description": null,
      "content": "<p>A request to change your password has been made. To continue the password change process, click on the link below.</p><a href=\"{{callbackurl}}\">Click here to reset your password.</a></p>\n<p>PLEASE NOTE THAT THIS LINK EXPIRES WITHIN 1 HOUR OF SENDING THIS EMAIL.</p><p>If you did not initiate this request, please contact the Helpdesk via email at {{helpdeskemail}}; or by calling (toll-free) {{helpdeskphone}}</p> ",
      "subject": "FWIMS Password Change Request"
    }]
  });

  var Tag = function(id, name, value, description) {
    var self = this;
    self.id = ko.observable(id);
    self.name = ko.observable(name);
    self.value = ko.observable(value);
    self.description = ko.observable(description);
  };

  var Template = function(id, key,...