JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<div class="icon">
  <i class="fa fa-heart"></i>
</div>
<div class="icon">
  <i class="fa fa-heart"></i>
</div>
<div class="icon">
  <i class="fa fa-heart"></i>
</div>

CSS

body {
  padding: 100px;
}

.icon {
  margin: 20px;
  float: left;
}

@-webkit-keyframes hover {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  15% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    top: 7px;
    left: 7px;
    opacity: 1;
  }
}

@keyframes hover {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  15% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    top: 7px;
    left: 7px;
    opacity: 1;
  }
}

@-webkit-keyframes click {
  0% {
    top: 7px;
    left: 7px;
  }
  15% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  70% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}

@keyframes click {
  0% {
    top: 7px;
    left: 7px;
  }
  15% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  70% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}

@-webkit-keyframes beat {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    color: #C7C7C7;
  }
  50% {
    -webkit-transform: scale(1.35);
            transform: scale(1.35);
    /*color: #C7C7C7;*/
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes beat {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    color: #C7C7C7;
  }
  50% {
    -webkit-transform: scale(1.35);
            transform: scale(1.35);
    /*color: #C7C7C7;*/
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes ready {
  100% {
    -webkit-transform:...

JavaScript

Array.prototype.forEach.call(document.querySelectorAll(".icon"), function(icon){
  for (var i = 1; i <= 8; i++){
    var span = document.createElement("span");
    span.classList.add("i" + i);
    icon.insertBefore(span, icon.firstChild);
  }
  icon.addEventListener("click", function(){
    this.classList.add("clicked");
  });
});