JSFiddle - React, Tailwind, and code Playground

by Kamlesh Kushwaha

HTML

<div class='popupLayer'>
   ...// popuplayer body
 </div>
 ...

CSS

.popupLayer {
					 position: absolute;
					 width: 76%;
					 left: 50%;
					 top: 0%;
					 transform: translate(-50%, -55%);
					 outline: 1px solid red;
					 display: none;
					 background-color: white;
					 border-radius: 25px;
					 overflow: hidden;
					 transition: height 4s ease-in;
					 height: 0;
				 }

JavaScript

setTimeout(function() {
					var expandDiv = document.getElementsByClassName('popupLayer')[0];
					expandDiv.style.display = 'block';
					expandDiv.style.top = '55%';
					setTimeout(function() {
						expandDiv.style.height = '55%';
					}, 1000);
				}, 4000);