JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="item">
    <div class="even">
        1
    </div>
</div>
<div class="item">
    <div class="odd">
        2
    </div>
</div>
<div class="item">
    <div class="even">
        3
    </div>
</div>
<div class="item">
    <div class="odd">
        4
    </div>
</div>
<div class="item">
    <div class="even">
        5
    </div>
</div>
<div class="item">
    <div class="odd">
        6
    </div>
</div>
<div class="item">
    <div class="even">
        7
    </div>
</div>
<div class="item">
    <div class="odd">
        8
    </div>
</div>
<div class="item">
    <div class="even">
        9
    </div>
</div>
<div class="item">
    <div class="odd">
        10
    </div>
</div>
<div class="item">
    <div class="even">
        11
    </div>
</div>
<div class="item">
    <div class="odd">
        12
    </div>
</div>
<div class="item">
    <div class="even">
        13
    </div>
</div>
<div class="item">
    <div class="odd">
        14
    </div>
</div>
<div class="item">
    <div class="even">
        15
    </div>
</div>
<div class="item">
    <div class="odd">
        16
    </div>
</div>
<div class="item">
    <div class="even">
        17
    </div>
</div>
<div class="item">
    <div class="odd">
        18
    </div>
</div>
<div class="item">
    <div class="even">
        19
    </div>
</div>
<div class="item">
    <div class="odd">
        20
    </div>
</div>
<div class="item">
    <div class="odd">
        21
    </div>
</div>
<div class="item">
    <div class="odd">
        22
    </div>
</div>

<button>Done</button>

CSS

.item {float:left; margin-left:2px; margin-bottom:2px; color:#fff; font-size:20px;}
.item .odd {padding:20px; width:150px; height:200px; background:#6F336F; display:table-cell; vertical-align:middle; text-align:center;}
.item .even {padding:20px; width:150px; height:200px; background:#2A5F43; display:table-cell; vertical-align:middle; text-align:center;}
button {
  margin: 0 auto;
  clear: both;
  display: block;
  position: relative;
  top: 20px;
  height: 40px;
  width: 200px;
  border: 0;
  background: #AE4646;
  border-radius: 20px;
  color: #fff;
  outline:0;
}

button:hover {background: #BB3D3D; cursor:pointer;}

JavaScript

(function($){
   $.fn.shuffle = function() {
      var allElems = this.get(),
      getRandom = function(max) {
         return Math.floor(Math.random() * max);
      },
      shuffled = $.map(allElems, function(){
         var random = getRandom(allElems.length),
         randEl = $(allElems[random]).clone(true)[0];
         allElems.splice(random, 1);
         return randEl;
      });
      this.each(function(i){
         $(this).replaceWith($(shuffled[i]));
      });
      return $(shuffled);
   };
})(jQuery);

$('.item').hide();
$('button').click(function() {
    $('.item').shuffle();
    $('.item').hide().slice( 0, 3 ).show();
});