JSFiddle - React, Tailwind, and code Playground

HTML

<div class="animate" id="indexJoinBanner" > 
  !-- end #indexJoinBanner --></div>
  <div class="animate" id="indexJoinBanner2" > 
  !-- end #indexJoinBanner2 --></div>

CSS

div{position:relative}

JavaScript

$('.animate').on('mouseover', function () {
  $(this).animate({
    left: "0px",
  },500 );
}).on('mouseout', function () {
  $(this).animate({
    left: "-150px",
  },500 );
})