JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<div class="animate"></div>
<div class="animate"></div>
<div class="animate"></div>
<div class="animate"></div>
<div class="animate"></div>
<div class="animate"></div>

CSS

.animate{width:100px;height:50px;position:relative;float:left}

JavaScript

var shuffle = function() {
    return 0.5 - Math.random();
},
    arr = ['red', 'green', 'maroon', 'blue', 'yellow', 'dimgrey'].sort(shuffle);

$('div.animate').each(function(i) {
    this.style.cssText = 'background-color:' + arr[i];
}).click(function() {
    var $this = $(this);
    $this.animate({
        opacity: 'hide',
        top: $(window).height() - $this.height() - $this.position().top
    }, 'slow');

});