JSFiddle - React, Tailwind, and code Playground

HTML

<button id="button">Click to slideDown!</button>
<div id="wrapper">
    <div class="slideMeDown">cool!</div>
</div>

CSS

#wrapper {
    transition:height 1s ease-out;
    height:0;
    overflow:hidden;
}
.slideMeDown {
    font-size:24px;
    background: #4679bd;
    color:white;
    width:50%;
    height:200px;
    padding:20px;
}

JavaScript

document.getElementById("button").addEventListener("click", function () {
    document.getElementById("wrapper").style.height = "240px";
});