JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-image">
    This is<br/>
    a fake content
</div>

CSS

#main-image{
    max-height:0;
    overflow: hidden;
    background: red;
   -moz-animation: slide 1s ease 3.5s forwards;
   -webkit-animation: slide 1s ease 3.5s forwards;
   -o-animation: slide 1s ease 3.5s forwards;
   -ms-animation: slide 1s ease 3.5s forwards;
    animation: slide 1s ease 3.5s forwards;
}


@-moz-keyframes slide /* Firefox */
{
from {max-height: 0;}
to {max-height: 300px;}
}

@-webkit-keyframes slide /* Safari and Chrome */
{
from {max-height: 0;}
to {max-height: 300px;}
}

@-o-keyframes slide /* Opera */
{
from {background: red;}
to {background: yellow;}
}

@-ms-keyframes slide /* IE10 */
{
from {max-height: 0;}
to {max-height: 300px;}
}

@keyframes slide
{
from {max-height: 0;}
to {max-height: 300px;}
}