JSFiddle - React, Tailwind, and code Playground

HTML

<button id="shuffle">Shuffle</button>

<ul id="pagination">
    <li><img src="http://placekitten.com/189/191" height="196" width="202"></li>
    <li><img src="http://placekitten.com/206/193" height="196" width="202"></li>
    <li><img src="http://placekitten.com/210/204" height="196" width="202"></li>
    <li><img src="http://placekitten.com/200/195" height="196" width="202"></li>
        
    <li><img src="http://placekitten.com/194/181" height="196" width="202"></li>
    <li><img src="http://placekitten.com/197/190" height="196" width="202"></li>
    <li><img src="http://placekitten.com/204/202" height="196" width="202"></li>
    <li><img src="http://placekitten.com/186/191" height="196" width="202"></li>
        
    <li><img src="http://placekitten.com/211/191" height="196" width="202"></li>
    <li><img src="http://placekitten.com/186/218" height="196" width="202"></li>
    <li><img src="http://placekitten.com/198/191" height="196" width="202"></li>
    <li><img src="http://placekitten.com/209/185" height="196" width="202"></li>        
</ul>

CSS

.clearfix { zoom: 1; }
.clearfix:before,
.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }

body {
    background: #3d3c3c;
    margin: 60px 0 0 60px;
}
#shuffle {
    background-color: #ffffff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(top, #ffffff, #e6e6e6);
    border-color: #d0d0d0 #ccc #b8b8b8;
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin: 0 0 0 45px;
    padding: 10px 20px;
    text-shadow: 0 1px 0 #fff;
}
#pagination {
    background: #3d3c3c;
    height: 954px;
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 1076px;
}
#pagination li {
    background: #efeeea;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    left: 0;
    line-height: 0;
    margin: 0;
    padding: 10px 10px 60px;
    position: absolute;
    top: 0;
}
#pagination img {
    border: 1px solid #c0c0c0;
}
        
#pagination li:nth-child(1),
#pagination li:nth-child(2),
#pagination li:nth-child(3),
#pagination li:nth-child(4) {
    top: 45px;
}
#pagination li:nth-child(5),
#pagination li:nth-child(6),
#pagination li:nth-child(7),
#pagination li:nth-child(8) {
    top: 343px;
}
#pagination li:nth-child(9),
#pagination li:nth-child(10),
#pagination li:nth-child(11),
#pagination li:nth-child(12) {
    top: 641px;
}
        
#pagination li:nth-child(1),
#pagination li:nth-child(5),
#pagination li:nth-child(9) {
    left: 45px;
}
#pagination li:nth-child(2),
#pagination li:nth-child(6),
#pagination...

JavaScript

$('#shuffle').toggle(
    function(e) {
        e.preventDefault();
        
        $(this).text('Reset');
        $('#pagination').addClass('shuffle-out');
    },
    function(e) {
        e.preventDefault();
        
        $(this).text('Shuffle');
        $('#pagination').removeClass('shuffle-out');
    }
);