JSFiddle - React, Tailwind, and code Playground

HTML

<div class="works">
    <h1>This example works</h1>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
</div>

CSS

div.works {
    height:20px;
max-height:20px;
    display:block;
    overflow:hidden;
    -webkit-transition: max-height 0.5s linear;
}
div.works:hover {
    height:100%;
    max-height: 200px;
    -webkit-transition: max-height 0.5s linear;
}