JSFiddle - React, Tailwind, and code Playground
HTML
<span id="btn">click to toggle</span>
<div id="regform">
<p>Hi. This is regform.</p>
</div>
<p>This is another element</p>
CSS
#regform {
-webkit-transition:opacity 300ms;
-moz-transition:opacity 300ms;
-o-transition:opacity 300ms;
-ms-transition:opacity 300ms;
}
JavaScript
var toggle = function(elm){
var y = elm.style && elm.style.display ? elm.style.display : 'block';
if (y == 'block'){
elm.style.opacity='0';
setTimeout( function(){ elm.style.display = 'none'; }, 300 );
}
else {
elm.style.display='block';
setTimeout( function(){ elm.style.opacity = '1'; }, 10 );
}
}
document.getElementById('btn').onclick = function(){
toggle(document.getElementById('regform'));
}