JSFiddle - React, Tailwind, and code Playground

HTML

<h2 class="sentence">One of my favorite browsers is
  <div class="rotate">
    <span>Chrome.</span>
    <span>Firefox.</span>
    <span>Safari.</span>
    <span>Opera.</span>
    <span>Edge.</span>
    <span>IE.</span>
  </div>
</h2>

CSS

.sentence{
     color: #222;
     font-size: 30px;
     text-align: left;
}

.sentence span{
	color: blue;
}

.rotate {
  display: inline;
	text-indent: 10px;
}

.rotate span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: 100%;
	color: blue;
}

.rotate span{
	animation: rotateWords 18s linear infinite 0s;
}

.rotate span:nth-child(2) { 
	animation-delay: 3s; 
}

.rotate span:nth-child(3) { 
	animation-delay: 6s; 
}

.rotate span:nth-child(4) { 
	animation-delay: 9s; 
}

.rotate span:nth-child(5) { 
	animation-delay: 12s; 
}

.rotate span:nth-child(6) {  
	animation-delay: 15s;
}

@keyframes rotateWords {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
	25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}