JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<div class="dashboard display-animation" style="margin: 0 auto; width: 1130px;">
  <a class="tile tile-lg tile-pink ripple-effect" href="#">
    <span class="content-wrapper">
      <span class="tile-content">
        <span class="tile-img" style="background-image: url(http://www.google.com/design/images/google_spec.png);"></span>
        <span class="tile-holder tile-holder-sm">
          <span class="title">Google Guidelines</span>
        </span>
      </span>      
    </span>
  </a>
  <a class="tile tile-lg tile-sqr tile-purple ripple-effect" href="#">
    <span class="content-wrapper">
      <span class="tile-content">
        <span class="tile-img" style="background-image: url(http://www.google.com/design/images/materialreel.png);"></span>
        <span class="tile-holder tile-holder-sm">
          <span class="title">Material Design Reel</span>
        </span>
      </span>      
    </span>
  </a>
  <a class="tile tile-lg tile-sqr tile-cyan ripple-effect" href="#">
    <span class="content-wrapper">
      <span class="tile-content">
        <span class="tile-img" style="background-image: url(http://www.google.com/design/images/principles.png);"></span>
        <span class="tile-holder tile-holder-sm">
          <span class="title">Material Design <span class="caption">PDF</span></span>
        </span>
      </span>      
    </span>
  </a>
  <a class="tile tile-lg tile-sqr tile-amber ripple-effect" href="#">
    <span class="content-wrapper">
      <span class="tile-content">
        <span class="tile-img tile-img-bg" style="background-image: url(http://www.google.com/design/images/doodlearchive.png);"></span>
        <span class="tile-holder tile-holder-sm">
          <span class="title">Doodle Archive</span>
        </span>
      </span>      
    </span>
  </a>
  <a class="tile tile-lg tile-light-blue ripple-effect" href="#">
    <span class="content-wrapper">
      <span class="tile-content">
        <span class="tile-img tile-img-bg"...

CSS

/* -- import Roboto Font ------------------------------ */
@import "https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic";


/* -- box model --------------------------------------- */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* -- Base style -------------------------------------- */
html {
  position: relative;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: #212121;
  background-color: #f5f5f5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -- Google typography ------------------------------- */
.title {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.1;
  color: #212121;
  text-transform: inherit;
  letter-spacing: inherit;
}

.caption {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.1;
  color: #bdbdbd;
  text-transform: inherit;
  letter-spacing: inherit;
}

/* -- Ripple-effect ----------------------------------- */
.ripple-effect {
  position: relative;
  overflow: hidden;
  -webkit-transform: translatez(0);
}
.ink {
  display: block;
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  transform: scale(0);
}
.ink {
  background: #fff;
  opacity: 1;
}
.ink.animate {
  -webkit-animation: ripple-effect 0.5s linear;
  -o-animation: ripple-effect 0.5s linear;
  animation: ripple-effect 0.5s linear;
}

@keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
  }
}
@-webkit-keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
    -ms-transform: scale(2.5);
   ...

JavaScript

/**
Google Material- Ripple Effect 
 * Created by Kupletsky Sergey on 16.09.14.
 *
 * Hierarchical timing
 * Add specific delay for CSS3-animation to elements.
 */

(function($) {
    var speed = 2000;
    var container =  $('.display-animation');
    container.each(function() {
        var elements = $(this).children();
        elements.each(function() {
            var elementOffset = $(this).offset();
            var offset = elementOffset.left*0.8 + elementOffset.top;
            var delay = parseFloat(offset/speed).toFixed(2);
            $(this)
                .css("-webkit-animation-delay", delay+'s')
                .css("-o-animation-delay", delay+'s')
                .css("animation-delay", delay+'s')
                .addClass('animated');
        });
    });
})(jQuery);

/**
 * Created by Kupletsky Sergey on 04.09.14.
 *
 * Ripple-effect animation
 * Tested and working in: ?IE9+, Chrome (Mobile + Desktop), ?Safari, ?Opera, ?Firefox.
 * JQuery plugin add .ink span in element with class .ripple-effect
 * Animation work on CSS3 by add/remove class .animate to .ink span
*/

(function($) {
    $(".ripple-effect").click(function(e){
        var rippler = $(this);

        // create .ink element if it doesn't exist
        if(rippler.find(".ink").length == 0) {
            rippler.append("<span class='ink'></span>");
        }

        var ink = rippler.find(".ink");

        // prevent quick double clicks
        ink.removeClass("animate");

        // set .ink diametr
        if(!ink.height() && !ink.width())
        {
            var d = Math.max(rippler.outerWidth(), rippler.outerHeight());
            ink.css({height: d, width: d});
        }

        // get click coordinates
        var x = e.pageX - rippler.offset().left - ink.width()/2;
        var y = e.pageY - rippler.offset().top - ink.height()/2;

        // set .ink position and add class .animate
        ink.css({
            top: y+'px',
            left:x+'px'
        }).addClass("animate");
...