JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.2.9/jsplumb.min.js"></script>
      <div class="container-fluid">
         <div class="row header">
            <div class="col-sm-12">		 
               <button type="button" class="btn pull-right login">
               <strong>
               Login
               </strong>
               </button>
            </div>
         </div>
         <div class="row content">
            <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-xs-4 sidebar">
               <div class="row rule-panel">
                  <div class="rule-header">Rules</div>
                  <div class="rule-body">
                     <div class="rule center-block">Rule 1</div>
                     <div class="rule center-block">Rule 2</div>
                     <div class="rule center-block">Rule 3</div>
                     <div class="rule center-block">Rule 4</div>
                     <div class="rule center-block">Rule 5</div>
                     <div class="rule center-block">Rule 6</div>
                     <div class="rule center-block">Rule 7</div>
                     <div class="rule center-block">Rule 8</div>
                     <div class="rule center-block">Rule 9</div>
                     <div class="rule center-block">Rule 10</div>
                  </div>
               </div>
               <div class="row event-panel">
                  <div class="event-header">Events</div>
                  <div class="event-body">
                     <div class="event center-block">Event 1</div>
                     <div class="event...

CSS

html, body, .container-fluid{
	height: 100%;
	width: 100%;
}
.header, .footer{
	background-color: #444;
	height: 6%;
}

.login, .save{
	margin: 0.8%;
	background: #eeba37;
	color: #333;
	background-image: linear-gradient(#fee6b0 0%,#eeba37 100%);
	box-shadow: rgba(255,255,255,0.6) 0 1px 0 inset;
    border-radius: 15px;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
}

.content{
	height: 88%;
}

.sidebar{
	height: 100%;
	border: 1px solid #444;
} 

.rule-panel, .event-panel{
	height: 50%;
	background-color: #ececec;
}

.rule-header, .event-header{
	background-color: #faaf34;
	height: 10%;
	text-align: center;
	font-weight: bold;
	font-size: 24px;
}

.rule-body, .event-body{	
	height: 85%;
	margin-top: 5%;
	overflow-y: scroll;
}

.layout{
	height: 100%;
	background-color: #ececec;
}

.rule{
	height: 8%;
	width: 50%;
	background-color: #aaa;
	text-align: center;
	margin-bottom: 5%;
	border: 1px solid black;
}
.event {
	height: 8%;	
	width: 50%;
	background-color: #aaa;
	text-align: center;
	margin-bottom: 5%;
	border: 1px solid black;
}

JavaScript

$(".rule").draggable({
    appendTo: "body",
    cursor: "pointer",
    helper: 'clone',
    revert: "invalid"
});

$(".event").draggable({
    appendTo: "body",
    cursor: "pointer",
    helper: 'clone',
    revert: "invalid"
});


       
var i=0;
var ruleArray = [];
var eventArray = [];
$(".layout").droppable({
    accept: ".rule, .event",
   /*  activeClass: "ui-state-default",
    hoverClass: "ui-state-hover", */
    drop: function(event, ui) {
        var clone = ui.helper.clone();
        clone.draggable({containment: 'parent'});
        $(".layout").append(clone);
        
        
        jsPlumb.Defaults.Container = $(".layout");
        jsPlumb.setContainer($('.layout'));
        
        var endpointOptions = { 
            isSource:true, 
            isTarget:true,
            endpoint: [ "Dot", {radius:5} ],
            style:{ fill:'grey' },
            maxConnections:-1,
            connector : "Straight",
            connectorStyle: { strokeWidth:2, stroke:'black' },
            scope:"blackline"
            /*,dropOptions:{ 
                  drop:function(e, ui) { 
                    alert('drop!'); 
                  } 
              }
            */			  
        };
        


        if(null == ui.draggable.attr('id')){
            if( ui.draggable.attr('class').indexOf('rule') != -1){
                clone.attr('id', 'rule_' + i);
                ruleArray.push('rule_' + i);
                jsPlumb.addEndpoint(clone.text('rule_' + i), {anchors: ["Left"]}, endpointOptions);
                jsPlumb.addEndpoint(clone.text('rule_' + i), {anchors: ["Right"]}, endpointOptions);
            } else {
                clone.attr('id', 'event_' + i);
                eventArray.push('event_' + i);
                jsPlumb.addEndpoint(clone.text('event_' + i), {anchors: ["Left"]}, endpointOptions);
                jsPlumb.addEndpoint(clone.text('event_' + i), {anchors: ["Right"]}, endpointOptions);
            }
            i++;
        }
       ...