JSFiddle - React, Tailwind, and code Playground

HTML

<a class="logo">Link</a>
<a class="reset">reset</a>

CSS

@-webkit-keyframes wiggle{
     0% {-webkit-transform: rotate(0deg);}
    15% {-webkit-transform: rotate(6deg);}
    16% {-webkit-transform: rotate(6deg);}
    30% {-webkit-transform: rotate(-6deg);}
    31% {-webkit-transform: rotate(-6deg);}
    50% {-webkit-transform: rotate(4deg);}
    51% {-webkit-transform: rotate(4deg);}
    71% {-webkit-transform: rotate(-1deg);}
    72% {-webkit-transform: rotate(-1deg);}
    89% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(0deg);}
}

.wiggle{
    -webkit-transition: all ease-in-out;
    -webkit-animation: wiggle 2.2s ease-in-out 0s 1 normal;
    -webkit-transform-origin: 224px 33px;   
}


/* ================= */
/* JUST SOME STYLING */

body { background:#333;}

a { float:left; position:relative; top:40px; left:40px; width:200px; height:50px; background:#ff8000; text-align:center; line-height:50px; color:#fff;}

a.reset {margin-left:20px; width:50px; height:50px; background:#80f;}

JavaScript

$(document).ready(function(){
    var logo = $('.logo');
    var reset = $('.reset');
    
    logo.click(function(){
        logo.animate({top: '100px'}, 700);
        logo.addClass('wiggle');
    });
    reset.click(function(){
        logo.removeClass('wiggle');
        logo.css({top: '40px'});
    });
});