JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"></div>
<button id="shake-the-box">Shake it!</button>

CSS

#box{
    background: blue;
    margin:30px;
    height:50px;
    width:50px;
    position:relative;
     
}
#box.trigger{
    display:table;
    animation:shake .2s 0 linear 1;
    -moz-animation:shake .2s 0 linear 1; 
    -webkit-animation:shake .2s 0 linear 1;
}
@-webkit-keyframes shake {
    0% {
        left: 0;
    }
    25% {
        left: 12px;
    }
    50% {
        left: 0;
    }
    75% {
        left: -12px;
    }
    100% {
        left:0;
    }
}
@-moz-keyframes shake {
    0% {
        left: 0;
    }
    25% {
        left: 12px;
    }
    50% {
        left: 0;
    }
    75% {
        left: -12px;
    }
    100% {
        left:0;
    }
}

JavaScript

$(document).ready(function(){
$('#shake-the-box').click(function(){
    
  $('#box').addClass('trigger');
    setTimeout(function(){
    $("#box").removeClass("trigger")},500)
    
});
});