JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.9-all-min.js"></script>
<div id="container">
        <div class="window" id="object1" style="left: 10px; top: 30px;">
            <div class="objectName">Person</div>
            <div class="objectProperty">firstName : String</div>
            <div class="objectProperty">middleName : String</div>
            <div class="objectProperty">lastName : String</div>
            <div class="objectProperty">dob : Date</div>
            <div class="objectProperty">Age: Integer</div>
            <div class="objectProperty">lastUpdated: DateTime</div>
        </div>
        <br />
        <div class="window" id="object2" style="left: 270px; top: 30px;">
            <div class="objectName">Address</div>
            <div class="objectProperty">addressLine1 : String</div>
            <div class="objectProperty">addressLine2 : String</div>
            <div class="objectProperty">city : String</div>
            <div class="objectProperty">zip : String</div>
            <div class="objectProperty">state : String</div>
            <div class="objectProperty">country : String</div>
        </div>
    </div>

CSS

.window { 
        border:1px solid #346789;        
        z-index:20; 
        position:absolute; 
        font-size:0.8em;
        size: auto;
}

.objectName{
            background: #ccc;
            width:200px;
            height:auto;
            margin:1px 3px 1px 3px;
            text-align: center;
            font-weight:bold;
            border-bottom:medium solid darkgray;        
            -webkit-transition: all .25s ease-in-out;                      
}
.objectProperty{
            
            width:200px;
            height:auto;
             margin:1px 3px 1px 3px;
             border-bottom:thin solid darkgray;   
            -webkit-transition: all .25s ease-in-out;
                     
}

JavaScript

$(document).ready(function() {
       jsPlumb.importDefaults({
            Anchors : [ "TopCenter" ],
            Endpoint : [ "Dot", {
                radius : 2
            } ],
            HoverPaintStyle : {
                strokeStyle : "#42a62c",
                lineWidth : 1
            },
            ConnectionOverlays : [ [ "Arrow", {
                location : 1,
                id : "arrow",
                length : 10,
                foldback : 1.0
            } ] ]
        });

        var connection = jsPlumb.connect({
            source : $('#object1'),
            target : $('#object2'),
            anchors : [ "RightMiddle", "LeftMiddle" ],
            connector : [ "Flowchart" ],
            paintStyle : {
                strokeStyle : "#000000",
                lineWidth : 1
            },
            endpoints : [ [ "Dot", {
                radius : 3
            } ] ]
        });

        connection.bind("click", function(conn) {
            $(".actionListener").trigger('connectorSelected', [ true ]);
        });

    jsPlumb.draggable($(".window"));
    $('.window').each( function(){
        $(this).resizable();
    });

});