JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap"></div>

CSS

#wrap {
    text-align:center;
    background-color: #eeeeee;
    display: block;
    height:0px;
    width:300px;    
    transition:all 2s ease-in;
    overflow:hidden;
}

#wrap:not(:empty){    
    height:100px;
}

JavaScript

var div = $('<div/>').html('Surprise!!');
$('#wrap').append(div);