JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Blind in</h2>

<div class="blind-content in">
    <p>Hello, i'am content.</p>
    <p>Hello, i'am content.</p>
    <p>Hello, i'am content.</p>
    <p>Hello, i'am content.</p>
</div>

<h2>Blind out</h2>

<div class="blind-content out">
    <p>Hello, i'am content.</p>
    <p>Hello, i'am content.</p>
    <p>Hello, i'am content.</p>
    <p>Hello, i'am content.</p>
</div>

CSS

.blind-content
{
   background-color: silver;
   transition-property: max-height, height;
   overflow: hidden;
}

.blind-content.in
{
     -webkit-animation: blind-in 3s infinite;
    animation: blind-in 3s infinite;
}

.blind-content.out
{
    -webkit-animation: blind-out 3s infinite;
    animation: blind-out 3s infinite;
}

@-webkit-keyframes blind-in {
      0% { max-height:0; }
    100% { max-height: 1000px; }
}

@-webkit-keyframes blind-out {
    0% { max-height: 1000px; }
    100% {  max-height:0;  }
}


@keyframes blind-in {
      0% { max-height:0; }
    100% { max-height: 1000px; }
}

@keyframes blind-out {
    0% { max-height: 1000px; }
    100% {  max-height:0;  }
}