JSFiddle - React, Tailwind, and code Playground

by dotnetCarpenter

HTML

<strike>The only difference between the two snippets of css is one has height 0, the other height 40.</strike>
The &quot;slideDown&quot; animation is made with scaleY transform.
<hr />
<div id="parent0">
    <h1>Hover me (scaleY)</h1>
    <div id="child0">
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
    </div>
</div>

CSS

#child0 {
	-webkit-transform: scaleY(0);
	-o-transform: scaleY(0);
	-ms-transform: scaleY(0);
	transform: scaleY(0);

	-webkit-transform-origin: top;
	-o-transform-origin: top;
	-ms-transform-origin: top;
	transform-origin: top;
	overflow: hidden;
	background-color: #dedede;

	-webkit-transition: -webkit-transform 1s ease;
	-webkit-transition: -webkit-transform 1s ease;
	-webkit-transition: -webkit-transform 1s ease;
	transition: transform 1s ease;
}

#parent0:hover #child0 {
	-webkit-transform: scaleY(1);
	-o-transform: scaleY(1);
	-ms-transform: scaleY(1);
	transform: scaleY(1);
}

h1 {
	font-weight: bold;
}