JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<section>  
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div> 
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div> 
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
</section>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

section {
  background: #eee;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}

.module {
  width: 48%;
  min-height: 200px;
  background: white;
  position: relative;
  float: left;
  padding: 20px;
  margin-right: 4%;
  margin-bottom: 4%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.module:nth-child(even) {
  margin-right: 0;
}

body {
  background: url(http://s.cdpn.io/3/blurry-blue.jpg);
  background-size: cover;
  padding: 30px;
}

.come-in {
  -webkit-transform: translateY(150px);
  -webkit-animation: come-in 0.8s ease forwards;
}

.come-in:nth-child(odd) {
  -webkit-animation-duration: 0.6s;
}

.already-visible {
  -webkit-transform: translateY(0);
  -webkit-animation: none;
}

@-webkit-keyframes come-in {
  from{
    -webkit-transform: scale(1.2);    
  }
  to {
    -webkit-transform: scale(1.0) translateY(0);    
  }
}

.starwars{
    -webkit-transform-origin: 50% 50%;
    -webkit-animation: starwars 0.6s ease-out both;
}
@-webkit-keyframes starwars {
    0% { opacity: 0; -webkit-transform: perspective(200px) scale(3) translateY(180px) rotateX(80deg); }
    80% { opacity: 1; -webkit-transform: perspective(200px) scale(1) rotateX(60deg) }
    100% { opacity: 1; -webkit-transform: perspective(200px) scale(1) rotateX(0deg) }
}

.zoomIn{    
    -webkit-animation: zoomIn 0.6s ease both;
}

@-webkit-keyframes zoomIn {
    0% { opacity: 0; -webkit-transform: scale(1.8); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}

@charset "UTF-8";
/*
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute,...

JavaScript

(function ($) {

    $.fn.animateCSS = function (effect, delay, callback) {

        // Return this to maintain chainability
        return this.each(function () {

            // Cache $(this) for speed
            var $this = $(this);

            // Create a function we can call later
            function run() {

                // Add the animation effect with classes
                $this.addClass('animated ' + effect);

                // Check if the elemenr has been hidden to start with
                if ($this.css('visibility') == 'hidden') {

                    // If it has, show it (after the class has been added)
                    $this.css({
                        'visibility': 'visible'
                    });

                }

                // If the element is hidden
                if ($this.is(':hidden')) {

                    // Show it
                    $this.show();

                }

                // Event triggered when the animation has finished
                $this.bind('animationend webkitAnimationEnd oAnimationEnd', function () {
                
                    // Remove the classes so they can be added again later
                    $this.removeClass('animated ' + effect);

                    // Add a callback event
                    if (typeof callback == 'function') {

                        // Execute the callback
                        callback.call(this);

                        // Unbind the event handlers
                        $this.unbind('animationend webkitAnimationEnd oAnimationEnd');

                    }

                });

            }

            // Check if delay exists or if it's a callback
            if (!delay || typeof delay == 'function') {

                // If it's a callback, move it to callback so we can call it later
                callback = delay;

                // Run the animation (without delay)
                run();

            } else {

                // Start...