JSFiddle - React, Tailwind, and code Playground

by MayhemII

HTML

<div class="slide-top"><span>Person</span><span> is</span><span> a</span><span> designer</span><span> living</span><span> in</span><span> Brooklyn,</span><span> NY.</span></div>

CSS

.slide-top{
   	font-family: "Raisonne-regular", Icons /*!Persona*/;
	font-weight: normal;
    font-style: normal;
	padding: 0;
	margin: 0;
	font-size: 6.8rem;
	line-height: 1.2;
	color: rgba(0, 0, 0, 1);
	text-rendering: optimizeLegibility;
    -webkit-animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
      opacity:1;
  }
  100% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
      opacity:1;
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
      opacity:1;
  }
  100% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
      opacity:1;
  }  }


    
.slide-top span:nth-child(2) { 
	animation-delay: .2s; 
}
.slide-top span:nth-child(3) { 
	animation-delay: .4s; 	
}
.slide-top span:nth-child(4) { 
	animation-delay: .6s; 
}
.slide-top span:nth-child(5) { 
	animation-delay: .8s; 
}
.slide-top span:nth-child(6) {  
	animation-delay: 1.0s; 
}
.slide-top span:nth-child(7) {  
	animation-delay: 1.2s; 
}
.slide-top span:nth-child(8) {  
	animation-delay: 1.3s; 
}

.slide-top span{
   	font-family: "Raisonne-regular", Icons /*!Persona*/;
	font-weight: normal;
    font-style: normal;
	padding: 0;
	margin: 0;
	font-size: 6.8rem;
	line-height: 1.2;
	color: rgba(0, 0, 0, 1);
	text-rendering: optimizeLegibility;
    -webkit-animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }