JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<body>
		<div id="success">
			<p>Congrats!
			<p>Your message has been
			<p>Successfully sent!
		</div>
		
	<button id="button">Submit</button>
	</body>

CSS

#success
			{
			background: white;
			border: solid 2px green;
			transition: height 1s ease 0s;
			overflow: hidden;
			}

JavaScript

window.addEventListener("load", function() {
  var $success = document.getElementById("success");
  var $success_height = $success.offsetHeight + "px";

  $success.style.height = "0px";
  $success.style.display = "none";


  document.getElementById("button").addEventListener("click", function() {
    //requestAnimationFrame(() => {
      $success.style.display = "block"
      requestAnimationFrame(() => {
        $success.style.height = $success_height;
      });
    //});
  });
});