JSFiddle - React, Tailwind, and code Playground

HTML

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Red-circle.svg/2000px-Red-circle.svg.png" class="circ1 circs">
                
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Red-circle.svg/2000px-Red-circle.svg.png" class="circ2 circs">
                
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Red-circle.svg/2000px-Red-circle.svg.png" class="circ3 circs">

<div id="click">
  <div title="Titulo">
  </div>
  <div>
  
  </div>
  <div title="ESTE">
       <img src="https://image.freepik.com/free-icon/play-button_318-42541.jpg" style="width:20px;margin-left:43px;margin-top:9px;">
  </div>

  </div>

CSS

.circ1{
           position:absolute;
           width:30px;
           left:46px;
           top:11.5px;
           z-index:110;
           display:none;
       } 
       .circ2{
           position:absolute;
           width:50px;
           left:36px;
           top:2px;
           z-index:110;
           display:none;
       } 
       .circ3{
           position:absolute;
           width:80px;
           left:21px;
           top:-13.5px;
           z-index:110;
           display:none;
       }

JavaScript

$("#click div::nth-child(3)").click(function(){
alert();
})

$(document).on('click', '.circs', function(event) {
    event.preventDefault(); 
    $("#click div::nth-child(3)").click();
});
    setInterval(function(){
        setTimeout(function(){
            $(".circ1").fadeIn("fast");
        }, 500);
        setTimeout(function(){
            $(".circ2").fadeIn("fast");
        }, 1000);
        setTimeout(function(){
            $(".circ3").fadeIn("fast");
        }, 1500);
        setTimeout(function(){
            $(".circ3").fadeOut("fast");
        }, 1700);
        setTimeout(function(){
            $(".circ2").fadeOut("fast");
        }, 1900);
        setTimeout(function(){
            $(".circ1").fadeOut("fast");
        }, 2100);
    }, 2100);