JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<span>W</span>
<span>O</span>
<span>R</span>
<span>D</span>
<span>P</span>
<span>R</span>
<span>E</span>
<span>S</span>
<span>S</span>
<span>-</span>
<span>C</span>
<span>L</span>
<span>U</span>
<span>B</span>
<span>.</span>
<span>C</span>
<span>O</span>
<span>M</span>

CSS

@import url(http://fonts.googleapis.com/css?family=Finger+Paint);
body {
 margin-top:200px;
 background: black;
 overflow: hidden;
 font: 50px "Finger Paint";
 text-align: center;
 color: transparent;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}
 
a {
 color:#fff;
 font-size:20px;
 text-decoration:none;
 margin:0 auto;
 text-align:center;
}
 
span {
 display: inline-block;
 margin-bottom:200px;
 text-shadow: 0 0 0 whitesmoke;
 -webkit-animation: smoky 5s both;
 animation: smoky 5s both;
}
 
span:nth-child(even) {
 -webkit-animation-name: smoky-mirror;
 animation-name: smoky-mirror;
}
 
@-webkit-keyframes smoky {
 60% {
 text-shadow: 0 0 40px whitesmoke;
 }
 to {
 -webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
 transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
 text-shadow: 0 0 20px whitesmoke;
 opacity: 0;
 }
}
 
@keyframes smoky {
 60% {
 text-shadow: 0 0 40px whitesmoke;
 }
 to {
 -webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
 transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
 text-shadow: 0 0 20px whitesmoke;
 opacity: 0;
 }
}
@-webkit-keyframes smoky-mirror {
 60% {
 text-shadow: 0 0 40px whitesmoke;
 }
 to {
 -webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
 transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
 text-shadow: 0 0 20px whitesmoke;
 opacity: 0;
 }
}
@keyframes smoky-mirror {
 60% {
 text-shadow: 0 0 40px whitesmoke;
 }
 to {
 -webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
 transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
 text-shadow: 0 0 20px whitesmoke;
 opacity: 0;
 }
}
span:nth-of-type(1) {
 -webkit-animation-delay: 0.1s;
 animation-delay: 0.1s;
}
 
span:nth-of-type(2) {
 -webkit-animation-delay: 0.2s;
 animation-delay: 0.2s;
}
...