JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1"></div>
<div class="arrow"></div>
<div class="box2"></div>

CSS

.box1
{
    width: 350px;    height: 150px;    background: blue;    position: relative;
}

.box2
{
    width: 350px;    height: 150px;    background: yellow;
}

.arrow
{
    width: 0px;    height: 0px;    border-style: solid;    border-width: 0 12.5px 26px 12.5px;
    border-color: transparent transparent yellow transparent;    position: absolute;    top: 120px;    left: 310px;
}

JavaScript

$(document).ready(function(){

    $('.box1').click(function () {
       setInterval(function(){
          $('.arrow').css("top", "-=20px");
       }, 400);
       //clicking on box2 must clearInterval
    });

});