JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <section class="rw-wrapper">
        <h2 class="rw-sentence">
            <span>Real poetry is like</span>
            <br />
            <span>creating beautiful butterflies</span>
            <br />
            <span>with a silent touch of</span>
            <br />
            <div class="rw-words rw-words-1">
                <span>spice</span>
                <span>colors</span>
                
            </div>
        </h2>
    </section>
</div>

CSS

.rw-wrapper{
    width: 80%;
    position: relative;
    margin: 110px auto 0 auto;
    font-family: Arial;
    padding: 10px;
    text-align: center;
}
.rw-sentence{
    margin: 0;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span{
    color: #444;
    font-size: 200%;
    font-weight: normal;
}
.rw-words{
    display: block;
    position: relative;
}
.rw-words-1 span{
    position: absolute;
    width: 100%;
    opacity: 0;
    overflow: hidden;
    color: #6b969d;
   
    animation: rotateWord 5s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) { 
   
    animation-delay: 8s; 
    color: #6b889d;
}


@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-moz-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -moz-transform: translateY(-30px); }
    5% { opacity: 1; -moz-transform: translateY(0px);}
    17% { opacity: 1; -moz-transform: translateY(0px); }
    20% { opacity: 0; -moz-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-o-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -o-transform: translateY(-30px); }
    5% { opacity: 1; -o-transform: translateY(0px);}
    17% { opacity: 1; -o-transform: translateY(0px); }
    20% { opacity: 0; -o-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -ms-transform: translateY(-30px); }
    5% { opacity: 1; -ms-transform: translateY(0px);}
    17% { opacity: 1; -ms-transform: translateY(0px); }
    20% { opacity: 0; -ms-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes...