JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://bisostore.com/files/css/animate.min.css">
<div class="tahasoft d1"> test 1</div>
<div class="tahasoft d2"> test 2</div>
<div class="tahasoft d3"> test 3</div>

CSS

.tahasoft{
    width:100px;
    height:100px;
    text-align:center;
    padding-top: 50px;
    color:white;
    border-radius:5px;
    cursor:pointer;
    float:left;
    margin:5px;
}
.d1{background:orange}
.d2{background:blue}
.d3{background:green}

JavaScript

function animate(el,x) {
        $(el).addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
          $(this).removeClass(x + ' animated');
        });
  }


  $(".d1").hover(function(){
      animate( $(this),'rubberBand');    
    });

  $(".d2").hover(function(){
      animate( $(this),'swing');    
    });

  $(".d3").hover(function(){
      animate( $(this),'tada');    
    });