JSFiddle - React, Tailwind, and code Playground

HTML

<div class="listholder">
    <div id="arrowholder">
        <canvas id="arrow" width="300" height="200"></canvas>
    </div>
    
    <ul class="list1">
        <li id="qq1">sdfsdv</li>
        <li id="qq2">bnvnvb</li>
        <li id="qq3">nmnutymnj7</li>
        <li id="qq4">cvbc</li>
        <li id="qq5">45tsgd</li>
    </ul>
    
    <ul class="list2">
        <li id="aa3">fgtbrtgb</li>
        <li id="aa1">vbn xgbn</li>
        <li id="aa5">vdgver</li>
        <li id="aa4">asdasdv</li>
        <li id="aa2">nvfbnfn</li>
    </ul>
</div>

CSS

.listholder {
    position: relative;
}

.highlight {
    background-color: #f88;/**/
}

#arrowholder {
    position: relative;
}
#arrow {
    position: absolute;
    pointer-events: none;
}

.list1 {
    float: left;
    width: 150px;
    margin-right: 40px;
}

.list2 {
    float: left;
    width: 150px;
}

JavaScript

var arrow=$("#arrow");
var ctx=arrow.get(0).getContext("2d");

arrow.get(0).height=$(".list1").height();

function getPos(elem, end) {
    var temp=elem;
    if(end) {
        temp=$("<span>x</span>").appendTo(elem);
    }
    var position=temp.position();
    if(end) {
        temp.remove();
    }
    return position;
}

$(".list1 li, .list2 li").hover(function () {
    var n = this.id.substr(2);
    $("#qq" + n + ", #aa" + n).toggleClass("highlight");
});

$(".list1 li, .list2 li").hover(function() {
    var xOffset=10;
    var yOffset=9;
    var id=this.id.substr(2);
    var pos1=getPos($("#qq"+id), true);
    var pos2=getPos($("#aa"+id), false);
    pos1.left+=xOffset;
    pos2.left-=xOffset;
    pos1.top+=yOffset;
    pos2.top+=yOffset;
    ctx.beginPath();
    ctx.moveTo(pos1.left, pos1.top);
    ctx.lineTo(pos2.left, pos2.top);
    ctx.strokeStyle="#f00";
    ctx.lineWidth=2;
    ctx.stroke();
    ctx.save();
    ctx.translate(pos2.left, pos2.top);
    ctx.rotate(Math.atan2(pos2.top-pos1.top, pos2.left-pos1.left));
    ctx.beginPath();
    ctx.moveTo(0, -5);
    ctx.lineTo(8, 0);
    ctx.lineTo(0, 5);
    ctx.closePath();
    ctx.fillStyle="red";
    ctx.fill();
    ctx.restore();
}, function() {
    ctx.clearRect(0, 0, arrow.width(), arrow.height());
});