JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<section class="wrapper">
  
  <h2 class="sentence">Janie is a lovely girl because she is
    <div class="slidingVertical">
    <span>amazing</span>
    <span>beautiful</span>
    <span>cute</span>
    <span>honest</span>
    <span>cool</span>
    <span>brave</span>
    <span>wild</span>
    <span>interesting</span>
    <span>local</span>
    <span>sexy</span>
    <span>intelligent</span>
    <span>exotic</span>
    </div>
 
 <p>
  and cool. 
 </p>
  </h2>
 
 
</section>


</body>

CSS

/*Heading1*/
h1{
	color: #fff;
	font-size: 44px;
	margin-top: 40px;
	text-align: center;
}
/*Sentence*/
.sentence{
     color: #222;
     font-size: 30px;
     text-align: left;
}
/*Wrapper*/
.wrapper{
    font-family: 'Raleway', sans-serif;
    margin: 100px auto;
    padding: 40px 40px;
    position: relative;
    width: 70%;
}

/*Vertical Sliding*/
.slidingVertical{
	display: inline;
	text-indent: 8px;
}
.slidingVertical span{
	animation: topToBottom 10.5s linear infinite 0s;
	-ms-animation: topToBottom 10.5s linear infinite 0s;
	-webkit-animation: topToBottom 10.5s linear infinite 0s;
	color: #000;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.slidingVertical span:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4){
	animation-delay: 7.5s;
	-ms-animation-delay: 7.5s;
	-webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
	animation-delay: 12s;
	-ms-animation-delay: 12s;
	-webkit-animation-delay: 12s;
}

/*topToBottom Animation*/
@-moz-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: translateY(-50px); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: translateY(-50px); }
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: translateY(-50px); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1;...