JSFiddle - React, Tailwind, and code Playground
HTML
<button class="show">Show</button>
<button class="test hide transparent">Hide</button>
CSS
.test {
-webkit-transition: visibility 1s, opacity 1s;
}
.hide {
visibility: hidden;
}
.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").removeClass("transparent");
});
});