JSFiddle - React, Tailwind, and code Playground

HTML

<div id="button"></div>

CSS

#button {
    height: 30px;
    width: 120px;
    border: 1px solid black;
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

JavaScript

$("#button").click(function () {
        $("#button").removeClass();
        $("#button").addClass("fadeInDown animated");
    });