JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scrollup">
   <div class="headline" style="background-color: red;"> 
      <a href="https://servicii.fisc.md" target="_blank">
        <div style="height: 100px;">1</div>
        <div style="height: 100px;">2</div>
      </a>
   </div> 
</div>

<div id="scrollup">
   <div class="headline2" style="background-color: red;"> 
      <a href="https://servicii.fisc.md" target="_blank">
       <div style="width: 100px; height:100px; float:left;">a</div>
       <div style="width: 100px; height:100px; float:left; ">b</div>
       </a>
   </div> 
</div>

CSS

#scrollup {
   position: relative;
   overflow: hidden;
   border: 1px solid #000;
   height: 100px;
   width: 100px;
      float: left;
 }
 .headline {
   position: absolute;
   top:100px;
   height: 200px;
   width:100px;
   margin:0;
   padding:0; 
 }
 
 
 .headline2 {
   position: absolute;
   height: 100px;
   width:200px;
   margin:0;
   padding:0; 
 }

JavaScript

$(document).ready(function(){
$("div.headline").css("top","0px");
headline_interval = setInterval(headline_rotate,3000);
 });

function headline_rotate() {
  $("div.headline").animate({top: -100},"slow").delay(3000).animate({top: 0},"slow").delay(3000);
  $("div.headline2").animate({left: -100},"slow").delay(3000).animate({left: 0},"slow").delay(3000);
}