JSFiddle - React, Tailwind, and code Playground
HTML
<div id="shuffle">
<div class="hue">one</div>
<div class="hue">two</div>
<div class="hue">three</div>
<div class="hue">four</div>
<div class="hue">five</div>
<div class="hue">six</div>
</div>
CSS
.hue {
background: #ddd;
display: block;
}
.hue:nth-child(2n) {
background: yellow;
display: block;
}
JavaScript
var populateParent = (function() {
var parent = $("#shuffle");
var divs = parent.children().slice();
return function() {
parent.empty();
var clone = divs.slice();
for (var i = 0; i < 2 && i < divs.length; ++i) {
parent.append(clone.splice(Math.floor(Math.random() * clone.length), 1)[0]);
};
}
})();
populateParent();
setInterval(populateParent, 2000);