JSFiddle - React, Tailwind, and code Playground

HTML

<title>Getting started with jsPlumb</title>


<script type="text/javascript"
	src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script>

<link rel="stylesheet" type="text/css"
	href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css" />
<!--
<script type="text/javascript" src="ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css"
	href="ext/resources/css/ext-all.css" />

<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.js"></script>
<script src="js/jquery.jsPlumb-1.5.2.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="js/jsplumb-utils.js"></script>
<link rel="stylesheet" type="text/css"
	href="css/themes/base/jquery-ui.css" />
	<script type="text/javascript" src="app/app_jp.js"></script>
!-->

<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script
	src="http://iotsys.googlecode.com/hg-history/bf8c62118fb4cbc33d74e358aabb24a1f318e36c/obelix/vendor/assets/javascripts/jquery.jsPlumb-1.5.2.js"></script>
<script type="text/javascript"
	src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />


<link rel="stylesheet" href="css/app.css">
<script>
	function jpImportDefaults() {
		jsPlumb.importDefaults({
			Endpoint : [ "Dot", {
				radius : 2
			} ],
			HoverPaintStyle : {
				strokeStyle : "#1e8151",
				lineWidth : 2
			},
			ConnectionOverlays : [ [ "Arrow", {
				location : 1,
				id : "arrow",
				length : 14,
				foldback : 0.8
			} ], [ "Label", {
				label : "",
				id : "label",
				cssClass : "aLabel"
			} ] ]
		});
	}

	function getJpRectangle(id, name, text, object, css) {

		var...

CSS

.item {
	/*
  border: 1px solid black;
  background-color: #ddddff;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: #ddddff;
  width:5em;
  */
	padding: 1em;
	position: absolute;
	border: 1px solid black;
	z-index: 4;
	border-radius: 1em;
	border: 1px solid #2e6f9a;
	box-shadow: 2px 2px 19px #e0e0e0;
	-o-box-shadow: 2px 2px 19px #e0e0e0;
	-webkit-box-shadow: 2px 2px 19px #e0e0e0;
	-moz-box-shadow: 2px 2px 19px #e0e0e0;
	-moz-border-radius: 0.5em;
	border-radius: 0.5em;
	opacity: 0.8;
	filter: alpha(opacity =            80);
	cursor: move;
	background-color: white;
	font-size: 11px;
	-webkit-transition: background-color 0.25s ease-in;
	-moz-transition: background-color 0.25s ease-in;
	transition: background-color 0.25s ease-in;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

.action {
	/* border: 1px solid black;
  background-color: #ddddff;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: #ddddff;
  width:5em;*/
	padding: 1em;
	position: absolute;
	border: 1px solid black;
	z-index: 4;
	border-radius: 1em;
	border: 1px solid #2e6f9a;
	box-shadow: 2px 2px 19px #e0e0e0;
	-o-box-shadow: 2px 2px 19px #e0e0e0;
	-webkit-box-shadow: 2px 2px 19px #e0e0e0;
	-moz-box-shadow: 2px 2px 19px #e0e0e0;
	-moz-border-radius: 0.5em;
	border-radius: 0.5em;
	opacity: 0.8;
	filter: alpha(opacity =            80);
	cursor: move;
	background-color: white;
	font-size: 11px;
	-webkit-transition: background-color 0.25s ease-in;
	-moz-transition: background-color 0.25s ease-in;
	transition: background-color 0.25s ease-in;
}

.actionTitle {
	padding: 10px;
	cursor: move;
}

.decision {
	padding: 1em;
	position: absolute;
	border: 1px solid black;
	z-index: 4;
	border-radius: 1em;
	border: 1px solid #2e6f9a;
	box-shadow: 2px 2px 19px #e0e0e0;
	-o-box-shadow: 2px 2px 19px #e0e0e0;
	-webkit-box-shadow: 2px 2px 19px #e0e0e0;
	-moz-box-shadow: 2px 2px 19px #e0e0e0;
	border-radius: 0em;
	opacity: 0.8;
	filter:...

JavaScript

Ext.application({
		name : 'Test',

		launch : function() {

			Ext.create('Ext.container.Viewport', {
				layout : 'hbox',

				items : [ {
					xtype : 'panel',
					title : 'ExtJS - JSPlumb : flowchart',
					html : '<div id="fccontainer"></div>',
					listeners : {
						afterrender : function(panel, eopts) {
							console.log('panel rendered');
							panel.createflowchart(panel);
						}
					},
					createflowchart : function(panel) {
						console.log('Initialise function : createjsplumb');

						jpImportDefaults();
						var i = 0;
						var height = 0;
						var width = 0;
						var clickSource;
						var dec1 = panel.createDecision(clickSource, i, 50, 50,
								true);
						i++;
						var act1 = panel.createAction(clickSource, i, 300, 50,
								true);
						i++;

						$('#fccontainer').bind('contextmenu', function(e) {
							console.log(e);
							clickSource = e;
							e.preventDefault();
							contextMenu.showAt(e.pageX, e.pageY);
						});

						var contextMenu = new Ext.menu.Menu({
							items : [
									{
										text : 'Decision',

										handler : function() {
											console.log('Clicked : Decision')

											height += $('#' + i).height();
											width += $('#' + i).width();
											// console.log(height);
											i++;

											panel.createDecision(clickSource,
													i, clickSource.pageX,
													clickSource.pageY);
										}
									},
									{
										text : 'Action',
										handler : function() {
											console.log('Clicked : Action')
											// source = 'action';
											i++;
											panel.createAction(clickSource, i,
													clickSource.pageX,
													clickSource.pageY);
										}
									} ]
						});

						$('#fccontainer').dblclick(function(e) {
							// panel.createDecision(e,i);
						});
					},
					createDecision : function(e, i, x, y, isDefault) {

						if (isDefault == true) {
							resourceName = 'Condition 1'
						} else...