JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

<div class="bg-info text-center">
Content Above
</div>
<div class="text-center">
<span id="bouncer" class="badge badge-success">Bouncer</span>
</div>
<div class="bg-info text-center">
Content Below
</div>
<div class="mt-5">
<form>
Direction: <select id="shakeDirection">
<option value="up">up</option>
<option value="down">down</option>
<option value="left">left</option>
<option value="right">right</option>
</select><br>

Distance: <input type="text" id="shakeDistance" value="10" style="width:50px;" /><br>

Speed: <input type="text" id="shakeSpeed" value="75" style="width:50px;" /><br>

Times: <input type="text" id="shakeTimes" value="3" style="width:50px;" /><br>


<a id="bounceBtn" class="btn btn-success">Make it bounce</a>
</form>

</div>

JavaScript

(function($) {
	$.fn.shake = function(o) {
		if (typeof o === 'function')
			o = {callback: o};
		// Set options
		var o = $.extend({
			direction: "left",
			distance: 20,
			times: 3,
			speed: 25,
			easing: "swing"
		}, o);

		return this.each(function() {

			// Create element
			var el = $(this), props = {
				position: el.css("position"),
				top: el.css("top"),
				bottom: el.css("bottom"),
				left: el.css("left"),
				right: el.css("right")
			};

			el.css("position", "relative");

			// Adjust
			var ref = (o.direction == "up" || o.direction == "down") ? "top" : "left";
			var motion = (o.direction == "up" || o.direction == "left") ? "pos" : "neg";

			// Animation
			var animation = {}, animation1 = {}, animation2 = {};
			animation[ref] = (motion == "pos" ? "-=" : "+=")  + o.distance;
			animation1[ref] = (motion == "pos" ? "+=" : "-=")  + o.distance * 2;
			animation2[ref] = (motion == "pos" ? "-=" : "+=")  + o.distance * 2;

			// Animate
			el.animate(animation, o.speed, o.easing);
			for (var i = 1; i < o.times; i++) { // Shakes
				el.animate(animation1, o.speed, o.easing).animate(animation2, o.speed, o.easing);
			};
			el.animate(animation1, o.speed, o.easing).
			animate(animation, o.speed / 2, o.easing, function(){ // Last shake
				el.css(props); // Restore
				if(o.callback) o.callback.apply(this, arguments); // Callback
			});
		});
	};
})(jQuery);


$(document).ready(function(){

	$('#bounceBtn').on('click', function(){
     $('#bouncer').shake({
     		direction: $('#shakeDirection').val(),
        distance: $('#shakeDistance').val()*1,
        speed: $('#shakeSpeed').val()*1,
        times: $('#shakeTimes').val()*1
     });
  });

});