JSFiddle - React, Tailwind, and code Playground

HTML

<div id="element" class="pretty">Some content</div>

CSS

#element{
    -webkit-animation: 3s ease 0s normal forwards 1 fadein;
    animation: 3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

/* Additional styles not required */
.pretty {
    background: yellow;
    font-family: helvetica, arial, sans-serif;
    padding: 40px 20px;
    text-align: center;
    width: 100%;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 30px;
}