JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background_image">
    <img id="bgImage_1" class="bgImage" src="https://dl.dropboxusercontent.com/u/59549499/example/img/img1.jpg">
    <img id="bgImage_2" class="bgImage" src="https://dl.dropboxusercontent.com/u/59549499/example/img/img2.jpg">
    <img id="bgImage_3" class="bgImage" src="https://dl.dropboxusercontent.com/u/59549499/example/img/img3.jpg">
</div>

CSS

body
{
    width:100%;
    height:100%;
}

.bgImage
{
    display:none;
    width:100%;
    height:100%;
    
    position:absolute;
    top:0;
    left:0;
}

JavaScript

curImage = 0;
    nextImage = 1;

    function changeBG()
    {
        jQuery('#bgImage_' + nextImage).css('opacity', 0).show().animate({'opacity': 1}, 300);
        if(curImage > 0) jQuery('#bgImage_' + curImage).animate({'opacity': 0}, 300);
        
        curImage = nextImage;
        nextImage++;
        if(nextImage > 3) nextImage = 1;
    }
    changeBG();

    setInterval(changeBG, 2000);