JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

CSS

li{width:80px;height:80px;margin:5px;background:#f00; float:left}

JavaScript

Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};
var testArray = [];
var randomArray = [];
$('li').hide();
$('li').each(function(i) {
    testArray[i] = i;
});
$('li').each(function(i) {
    var rndNo = Math.floor(Math.random() * testArray.length);
    randomArray[i] = testArray[rndNo];
    testArray.remove(rndNo);
})
$('li').each(function(i){
    $('li').eq(randomArray[i]).fadeIn(i*1000);  
});