JSFiddle - React, Tailwind, and code Playground

HTML

<div class="guess">
<div class="box"><div class="red"></div></div>
<div class="box"><div class="blue"></div></div>
<div class="box"><div class="green"></div></div>
<div class="box"><div class="yellow"></div></div>
</div>

CSS

.guess {
  padding:5px;
  overflow:hidden;
}
.box {
  opacity:0;
  width:50px;
  height:50px;
  margin:5px;
  float:left;
  overflow:hidden;
  background:white;
  font-size:2em;
  text-align:center;
}
.box img {
    max-width:100%;
}
.box a {
    display:inline-block;
}

.red{
	height: 50px;
	width: 50px;
	background-color: red;	
	border-radius:2em;}
	
.blue{
	height: 50px;
	width: 50px;
	background-color: blue;	
	border-radius:2em;}
	
.green{
	height: 50px;
	width: 50px;
	background-color: green;	
	border-radius:2em;}
	
.yellow{
	height: 50px;
	width: 50px;
	background-color: yellow;	
	border-radius:2em;}

JavaScript

// Fisher-Yates Shuffle (random array)

    function pushRand (array, value, rng) {
        var j = (rng || Math).random() * (array.length + 1) | 0;
        array.push(array[j]);
        array[j] = value;
        return array.length;
    }

// Create array for fade order

    function introfade(x) {
        var o = [];
        while (x--) { pushRand(o, x); }
        return o;
    }

// Rearrange divs and fade them in

    function shuffle() {
        var b        = $('.box'),        // Box
            main     = $('.guess')[0],    // Container
            arrange  = $('<div>'),       // Box elements
            size     = b.size(),         // Amount of boxes
            fade     = introfade(size),  // Run introfade()
            boxes    = [],               // Array
            i;

        for (i = size; i--;){ pushRand(boxes, b[i]); }
        for (i = size; i--;){ main.appendChild(boxes[i]); }
        
/*******************************************************************

// Apply the array of anchors HERE
    //Pretend this is the correct syntax for 
    //.wrap different sources within the array
        
    $('.box img')
        [first].wrap('<a href="http://google.com/" />');
        [second].wrap('<a href="http://yahoo.com/" />');
        [second].wrap('<a href="http://aol.com/" />');
        
********************************************************************/

        b.each(function(i) {
            var c = $(this);
            setTimeout(function() {
                c.fadeTo(600, 1);
            }, fade[i]*60);
        });
    }

// Initialize shuffle

   shuffle();