JSFiddle - React, Tailwind, and code Playground
HTML
<button type="button" onclick="toggle()">Draw</button>
<br>
<div class="testDiv hide"></div>
<script>
function toggle() {
if ($(".testDiv").hasClass("hide") == true) {
$(".testDiv").removeClass("hide");
} else {
$(".testDiv").addClass("hide");
}
}
</script>
CSS
.testDiv {
background-color : blue;
height : 400px;
width : 400px;
min-height: 200px;
opacity: 1;
-webkit-transition: height 2s, -webkit-transform 2s;
/* For Safari 3.1 to 6.0 */
transition: height 2s, transform 2s;
}
.testDiv.hide {
height : 0px;
opacity: 0;
}