JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="bg-container bg-container-1 active"></div>
<div class="bg-container bg-container-2"></div>
</body>

CSS

body {
 min-height: 100vh;
 min-width: 100vw;
}

.bg-container {
  position: fixed;
  top:0;
  left:0;
  height: 100%;
  width: 100%;
  transition: 2s;
  opacity: 0;
}

.bg-container.active {
  opacity: 1;
}

.bg-container-1 {
  background-image: url(https://via.placeholder.com/350x150);
}

.bg-container-2 {
  background-image: url(https://via.placeholder.com/200x100);
}

JavaScript

var $el1;
var $el2;

setInterval(function() {
 		$el1 = $('.bg-container.active');
    $el2 = $('.bg-container:not(.active');
    $el1.removeClass('active');
    $el2.addClass('active');
  }, 2000);