JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<section>
    <div class="images">img1</div>
    <div class="images">img2</div>
    <div class="images">img3</div>
    <div class="images">img4</div>
    <div class="images">img5</div>
    <div class="images">img6</div>
    <div class="images">img7</div>
    <div class="images">img8</div>
    <div class="images">img9</div>
    <div class="images">img10</div>
    <div class="images">img11</div>
    <div class="images">img12</div>
</section>

CSS

.images {
    position:relative; 
    height: 80px; 
    width: 80px; 
    background: cyan; 
    margin: 10px; 
    float: left; 
    padding: 30px 0 0 30px;
}
section>.images:nth-child(n+4) {
    display:none;
}

JavaScript

$('.images').each(function() {
    randomElm = $('.images').get(Math.floor(Math.random()*10));
    randomElm.parentNode.insertBefore(this, randomElm);
});


//Used DIV elements, was to lazy to find actual images!