JSFiddle - React, Tailwind, and code Playground

by bergb

HTML

<script src="https://unpkg.com/[email protected]/leader-line.min.js"></script>
<html>
<head>

</head>
<body>

<div class="container">
  <div><div id="start" class="start square" >start</div></div>
  <div><div id="end" class="end  square">end</div></div>
</div>

<div class="container">
  <div><div id="start" class="start2  square">start2</div></div>
  <div><div id="end" class="end2  square">end2</div></div>
</div>

<div class="container">
  <div><div id="start" class="start square" >start</div></div>
  <div><div id="end" class="end  square">end</div></div>
</div>

<div class="container">
  <div><div id="start" class="start2  square">start2</div></div>
  <div><div id="end" class="end2  square">end2</div></div>
</div>


</body>
</html>

CSS

.container {
  position: relative;
}
.container {
  height: 130px;
}
.square {
  
  background: red;
  width: 50px;
  position:relative;
 
}
.start {
  left:0;
  
}
.end {
  top: 100px;
  right:0;
  position: absolute;
}

.start2{

  
  right: 0;
  position: absolute;
}

.end2{
  top: 100px;
  left: 0;
}

JavaScript

window.addEventListener('load', function() { 
var line = new LeaderLine(

document.querySelector('div .start:first-child'),
document.querySelector('div .end:first-child'),
  {startSocket: 'bottom', endSocket: 'top',dash: {len: 4, gap: 4, animation:true},size: 1, color:'#000', endPlug:'behind'}
);

var line2 = new LeaderLine(

document.querySelector('div .start2:first-child'),
document.querySelector('div .end2:first-child'),
  {startSocket: 'bottom', endSocket: 'top',dash: {len: 4, gap: 4,animation: true},size: 1, color:'#000', endPlug:'behind'}
);

})


document.addEventListener('resize',function() {
  line.position();
  line2.position();
});