JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainBox">
    <div id="mainHeader"> --- HEADER --- </div>
    <div id="mainContent">
        <div class="shuffleMe">AAA</div>
        <div class="shuffleMe">BBB</div>
        <div class="shuffleMe">CCC</div>
        <div class="shuffleMe">DDD</div>
    </div>
    <div id="mainFooter"> --- FOOTER --- </div>
</div>

CSS

body{
    margin:0px;
    padding:0px;
    font-family:verdana, arial, helvetica, sans-serif;
    font-size:14px;
    text-align:left;

    width:900px;
    margin-left:auto;
    margin-right:auto;
    position:relative;

    background-color:#fff;
}

#mainBox{
    width:700px;
    margin:30px;
    border:2px solid #ddd;
    margin-left:auto;
    margin-right:auto;
}

#mainHeader, #mainFooter, #mainContent{
    margin: 5px;
    padding:10px;
    border: 2px dashed #ddd;
    text-align:center;
}

.shuffleMe{
    margin: 5px;
    padding:10px;
    border: 2px solid #ddd;
    text-align:left;
}

JavaScript

var my_list = $('.shuffleMe').get();
my_list.sort(function(){
   return 0.5 - Math.random();
});
$.each(my_list, function(index, item) { 
    $('#mainContent').append(item); });