JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img1"></div>
<div class="img2"></div>

CSS

.img1{
    width      : 100px;
    height     : 100px;
    background : gold;
    display    : none;
}
.img2{
    width      : 100px;
    height     : 100px;
    background : black;
    display    : none;
}

JavaScript

$(function () {
    var t=0;
    function fadeInOut () {
        clearTimeout(t);                
        $('.img1').fadeIn(1500, 'linear').stop(1,1).delay(2000).fadeOut(1500, 'linear', function(){
            $('.img2').fadeIn(1500, 'linear').stop(1,1).delay(2000).fadeOut(1500, 'linear', function(){
                t=setTimeout(fadeInOut);
            })
        });
        
   
    }

    fadeInOut();
});