JSFiddle - React, Tailwind, and code Playground

by gajbhiye

HTML

<script src="http://jsplumb.org/js/1.3.4/jquery.jsPlumb-1.3.4-all.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
 <div id="main">			          

                 
            <div class="demo source-target-demo" id="source-target-demo">
                <div class="window" id="sourceWindow1">           
                    <strong>Window 1</strong>
                    <a href="#" id="enableDisableSource">disable</a>                
                </div>
                <div class="window smallWindow" id="targetWindow2"><strong>Window 2</strong><br/><br/></div>
                <div class="window smallWindow" id="targetWindow3"><strong>Window 3</strong><br/><br/></div>
                <div class="window smallWindow" id="targetWindow4"><strong>Window 4</strong><br/><br/></div>
                <div class="window smallWindow" id="targetWindow5"><strong>Window 5</strong><br/><br/></div>
                <div class="window smallWindow" id="targetWindow6"><strong>Window 6</strong><br/><br/></div>
            </div>
        </div>

CSS

/** DISABLE TEXT SELECTION (SET ON BODY WHEN DRAGGING IS OCCURRING) **/
._jsPlumb_drag_select * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none
}

/** OPEN SANS FONT **/
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
 	src:local('Open Sans'), 
 		local('OpenSans'),
 		url("font/OpenSans-Regular.ttf") format('truetype'),
 		url("font/OpenSans.woff") format('woff');
}

/** PAGE STRUCTURE **/

.dropdown { 
  display:inline;
}

.dropdown-menu>li>a {
  width:80%;
  text-transform: uppercase;
  font-size:12px;
}

/** FB **/
#like {
    position: fixed;
    width: 77px;
    height: 70px;
    border: 0;
    right: 11px;
    bottom: -40px;
}

#retweet_button {
  position: fixed;
  bottom: 30px;
  right: -7px;
}

body {
    padding:0;
    margin:0;    
    font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;    
    background-color:#eaedef;
   
}

#headerWrapper {
	width:100%;
	background-color:white;
	position:fixed;
	top:0;left:0;
  z-index:100001;
	height:44px;
  padding:0;
  opacity:0.8;
}

#header {
	margin-top:0;
  height:44px;
  font-size:13px;
	margin-left:auto;
	margin-right:auto;    
  padding-right: 50px;
  padding-left: 50px;
}

.logo {  
  font-size:30px;
  color:#1f1f1f;
  text-shadow: 1px 1px #ccc;
  float:left;
  /*background-image:url(logo-export-35h.png);
  background-repeat:no-repeat;    */
  width:154px;
  height:44px;
  background-position:0px 5px;
}

 #main {  
  margin-top:85px;  
  font-size: 80%;    
  width:75%;
  margin-left:auto;
  margin-right: auto;  
  height:600px;
  text-align: center;
  position: relative;
  max-width:852px;
}

.demo {
  position: relative;
  width:100%;
  background-color:white;    
  height:563px;
  overflow:auto;  
  margin-top:35px;
  margin-bottom:25px;
}

.explanation {
  position: absolute;
  text-align: center;
  background-color:...

JavaScript

jQuery(document).ready(function (){


 var data = {0:  '<div class="featured-posts">'+
                  'LOREM'+
                 '</div>', 
             1:  '<div class="featured-posts">'+
                  'LOREM'+
                 '</div>',
             2:  '<div class="featured-posts">'+
                  'LOREM'+
                 '</div>','<div class="featured-posts">'+
                  'LOREM'+
                 '</div>',
             4:  '<div class="featured-posts">'+
                  'LOREM'+
                 '</div>'
 };
 $('.smallWindow').each(function(index){

  $(this).html(data[index]);
 });
 
 
 var container = document.querySelector('#source-target-demo');
 var msnry = new Masonry( container, {
   itemSelector: '.smallWindow'
 });

 $('.smallWindow').each(function(index){
  
 });
 
 
	jsPlumb.ready(function() {			

 
		// list of possible anchor locations for the blue source element
		var sourceAnchors = [

			[ 0.5, 0, 1, 1 ],
		
		];
        
        var instance = jsPlumb.getInstance({
        	// set default anchors.  the 'connect' calls below will pick these up, and in fact setting these means
        	// that you also do not need to supply anchor definitions to the makeSource or makeTarget functions. 
            Anchors : [ sourceAnchors, "TopCenter" ],
        	// drag options
        	DragOptions : { cursor: "pointer", zIndex:2000 },
			// default to blue at source and green at target
			EndpointStyles : [{ fillStyle:"#0d78bc" }, { fillStyle:"#558822" }],
			// blue endpoints 7 px; green endpoints 11.
			Endpoints : [ ["Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
			// default to a gradient stroke from blue to green.  for IE provide all green fallback.
			PaintStyle : {
            	gradient:{ stops:[ [ 0, "#0d78bc" ], [ 1, "#558822" ] ] },
            	strokeStyle:"#558822",
            	lineWidth:10
        	},
        	Container:"source-target-demo"
        });

		// click listener for the enable/disable link.
       ...