JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container"></div>
CSS
#container {
width: 600px;
height: 300px;
border: 1px solid;
}
.block {
padding: 5px;
margin: 10px;
background-color: #eee;
}
JavaScript
var blocks = [
'test 1',
'test 2',
'test 3',
];
var $container;
$(function(){
blocks = shuffle(blocks);
$container = $('#container');
console.log(blocks);
for (var i = 0, l = blocks.length; i < l; i++) {
$container.append('<div class="block">'+blocks[i]+'</div>');
}
})
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}