JSFiddle - React, Tailwind, and code Playground

by Balagangadhar

CSS

#container {
        border: 1px solid gray;
        width: 600px;
        height: 600px;
      }
	  #propertygrid{
	  border: 1px solid gray;
        width: 200px;
        height: 200px;
	  }
	  
	  #fccontainer {
        border: 1px solid gray;
        width: 600px;
        height: 600px;
      }



.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;
  }
.predicate{

	padding:1em;
	position:absolute;
	border: 1px solid...

JavaScript

Ext.application({
    name: 'Test',

    launch: function() {
    
        Ext.create('Ext.container.Viewport', {
            layout: 'hbox',
			
            items: [
                {
                    xtype: 'panel',
					title : 'ExtJS - JSPlumb demo',
                    id : 'container',
					listeners : {
						afterrender : function(panel,eopts){
						console.log('panel rendered');
						panel.createjsplumb(panel);
						}
					},
					html : '<div id="container"></div>',
				createjsplumb : function(panel){
					console.log('Initialise function : createjsplumb');
					
					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" }]
						]
					});
					var i = 0;

						  $('#container').dblclick(function(e) {
						  var resourceName = null; 
						  Ext.Msg.prompt('Name', 'Enter resource name:', function(btn, text){
									if (btn == 'ok'){
										resourceName = text
									

						  
							//var name = prompt('Enter resource name','New Resource');
							var newState = $('<div>').attr('id', 'Resource' + i).attr('name',resourceName).addClass('item').text(resourceName);
							
							
							//var newState = $(".w");
							var title = $('<div>').addClass('title').text(resourceName);
							var connect = $('<div>').addClass('connect');
							
							newState.css({
							  'top': e.pageY,
							  'left': e.pageX
							});
							
							jsPlumb.makeTarget(newState, {
							  anchor: 'Continuous'
							});
							
							jsPlumb.bind("connection", function(info, originalEvent) {
								console.log('connection');
								console.log(info);
								var source = info.source;
								var target =...