JSFiddle - React, Tailwind, and code Playground

by Sub Lines

HTML

<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>

CSS

.logo {
  background: url(http://placekitten.com/g/150/150);
  background-size: cover;
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid red;
  transition: background .5s;
}

JavaScript

var urls = [
'url(http://placekitten.com/g/150/150)', 
'url(http://placekitten.com/g/200/200)', 
'url(http://placekitten.com/g/250/250)',
'url(http://placekitten.com/g/300/300)',
'url(http://placekitten.com/g/350/350)',
'url(http://placekitten.com/g/400/400)',
'url(http://placekitten.com/g/450/450)'
];
var active = Math.floor(Math.random() * (urls.length));
setInterval(function(){
    let logos = document.querySelectorAll('.logo');
    logos.forEach(function(item) {
       item.style.background = urls[active];
       active++;
       if (active == urls.length) active = 0;
    })
}, 2000);