JSFiddle - React, Tailwind, and code Playground

HTML

<button class="show">Show</button>
<button class="test hide transparent">Hide</button>

CSS

.test {
    -webkit-transition: opacity 1s;
}

.hide {
    display: none;
}

.transparent {
    opacity: 0;
}

JavaScript

$(function() {
    var test = $(".test");
    var show = $(".show");
    
    test.on("click", function() {
        test.addClass("hide").addClass("transparent");
    });
    
    show.on("click", function() {
        test.removeClass("hide");
        setTimeout(function() {test.removeClass("transparent"); }, 0);
        // test.removeClass("transparent"); // no timeout - no animation
    });
});