JSFiddle - React, Tailwind, and code Playground

HTML

<div id="animate"><div id="menu"><p>A example 1</p><p>A example 2</p></div></div>

CSS

#menu {
    width: 100%;
     height: 100%;
    text-align: center;
    display: table;
    overflow: hidden;
}

#animate {
    width: 500px;
    overflow: hidden;
    height: 50px;
    animation: animation 2s;
    animation-fill-mode: forwards;
    -webkit-animation: animation 2s;
    -webkit-animation-fill-mode: forwards;
}

#menu p
{
    display: table-cell;
    vertical-align: middle;
}

@keyframes animation
{
from { background: cyan; color: #000; height: 0; opacity: 0;}
to { background: blue; color: #FFF; height: 50px; opacity: 1; }
}

@-webkit-keyframes animation
{
from { background: cyan; color: #000; height: 0; opacity: 0;}
to { background: blue; color: #FFF; height: 50px; opacity: 1; }
}