JSFiddle - React, Tailwind, and code Playground

by Sub Lines

HTML

<div id="images">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>

CSS

body { margin: 0; font-size: 0;}

.image {
  background-size: cover;
  display: inline-block;
  width: 23%;
  padding-top: 23%;
  margin: 1%;
  transition: opacity 0.4s ease;
}

.image:nth-of-type(1) {
  background-image: url(https://via.placeholder.com/150/2b00ff);
}
.image:nth-of-type(2) {
  background-image: url(https://via.placeholder.com/150/bf00ff);
}
.image:nth-of-type(3) {
  background-image: url(https://via.placeholder.com/150/ff0090);
}
.image:nth-of-type(4) {
  background-image: url(https://via.placeholder.com/150/ff0000);
}
.image:nth-of-type(5) {
  background-image: url(https://via.placeholder.com/150/ff9500);
}
.image:nth-of-type(6) {
  background-image: url(https://via.placeholder.com/150/fffb00);
}
.image:nth-of-type(7) {
  background-image: url(https://via.placeholder.com/150/51ff00);
}
.image:nth-of-type(8) {
  background-image: url(https://via.placeholder.com/150/00ffbb);
}

.show {
      opacity: 1;
}

.hide {
  opacity: 0;
}

JavaScript

var urls = [
    	'url(https://via.placeholder.com/150/2b00ff)', //initial 1
    	'url(https://via.placeholder.com/150/bf00ff)', //initial 2
    	'url(https://via.placeholder.com/150/ff0090)', //initial 3
      'url(https://via.placeholder.com/150/ff0000)', //initial 4
      'url(https://via.placeholder.com/150/ff9500)', //initial 5
      'url(https://via.placeholder.com/150/fffb00)', //initial 6
      'url(https://via.placeholder.com/150/51ff00)', //initial 7
      'url(https://via.placeholder.com/150/00ffbb)', //initial 8
      'url(https://via.placeholder.com/150/00e5ff)',
      'url(https://via.placeholder.com/150/0084ff)',
      'url(https://via.placeholder.com/150/8800ff)'
	  ];
	  // Select the next image
    var selectedImages = [1,2,3,4,5,6,7,8] // initial state

     

	  setInterval(function() {
	  var active; 
    do{
      active = Math.floor(Math.random() * (urls.length - 2)) + 1
    } while(selectedImages.indexOf(active) != -1) // get a unique image (not in current ones that are displayed)
		// Select randomnly the next div to change
		var rand = Math.floor(Math.random() * 4);
    selectedImages[rand] = active;

    
		let current = $('.image:nth-child('+(rand+1)+')');
		
		current.toggleClass("show hide");
		
		// The fade effect takes 400ms
		
		setTimeout(function(){
		
		  current.css('background-image', urls[active]);
  
		
		  current.toggleClass("hide show");
		
		},400);

		
	  }, 2000);