JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div id="sub"></div>

CSS

#sub {
    background-color: red;
    width: 50px;
    height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px; 
}
.effect{
    -webkit-animation: bounce 1.2s ease-out;
    -moz-animation: bounce 800ms ease-out;
    -o-animation: bounce 800ms ease-out;
    animation: bounce 1.2s ease-out;
}
/* Webkit, Chrome and Safari */

@-webkit-keyframes bounce {
	0% {
		-webkit-transform:translateY(-100%);
	}
	5% {
		-webkit-transform:translateY(-100%);
	}
	15% {
		-webkit-transform:translateY(0);
	}
	20% {
		-webkit-transform:translateY(-80%);
	}
	25% {
		-webkit-transform:translateY(0%);
	}
	30% {
		-webkit-transform:translateY(-70%);
	}
	35% {
		-webkit-transform:translateY(0%);
	}
	40% {
		-webkit-transform:translateY(-60%);
	}
	45% {
		-webkit-transform:translateY(0%);
	}
	50% {
		-webkit-transform:translateY(-50%);
	}
	55% {
		-webkit-transform:translateY(0%);
	}
	60% {
		-webkit-transform:translateY(-30%);
	}
	65% {
		-webkit-transform:translateY(0%);
	}
	70% {
		-webkit-transform:translateY(-15%);
	}
	75% {
		-webkit-transform:translateY(0);
	}
	80% {
		-webkit-transform:translateY(-10%);
	}
	85% {
		-webkit-transform:translateY(0);
	}
	90% {
		-webkit-transform:translateY(-5%);
	}
	95% {
		-webkit-transform:translateY(0);
	}
	100% {
		-webkit-transform:translateY(0);
	}
}

/* Mozilla Firefox 15 below */
@-moz-keyframes bounce {
  0% {
	-moz-transform:translateY(-100%);
  }
  5% {
  	-moz-transform:translateY(-100%);
  }
  15% {
  	-moz-transform:translateY(0);
  }
  30% {
  	-moz-transform:translateY(-50%);
  }
  40% {
  	-moz-transform:translateY(0%);
  }
  50% {
  	-moz-transform:translateY(-30%);
  }
  70% {
  	-moz-transform:translateY(0%);
  }
  80% {
  	-moz-transform:translateY(-15%);
  }
  90% {
  	-moz-transform:translateY(0%);
  }
  95% {
  	-moz-transform:translateY(-10%);
  }
  97% {
  	-moz-transform:translateY(0%);
  }
  99% {
  	-moz-transform:translateY(-5%);
  }
  100% {
  	-moz-transform:translateY(0);
 ...

JavaScript

jQuery(document).ready(function(){
	$(document).on('click','#sub', function(){
		$(this).toggleClass('effect');
  })
});