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>
<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 !important;
  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 rand = Math.floor(Math.random() * 4);
  document.getElementsByClassName('logo')[rand].style.background = urls[active];
  active++;
  if (active == urls.length) active = 0;
  //})
}, 2000);