JSFiddle - React, Tailwind, and code Playground

by ALEKSEY SHULMAN

HTML

<div class="words words-grey ">
                        <span>w</span>
                        <span>e</span>
                        <span>l</span>
                        <span>c</span>
                        <span>o</span>
                        <span>m</span>
                        <span>e</span>
                        <span>&nbsp;&nbsp;</span>
                        <span>t</span>
                        <span>o</span>
                    </div>

CSS

.words { color: #fff; text-transform: uppercase; }
.words.words-grey { color: #fff; }

.words span {
  font-size: 120px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1;
  font-weight: 900;
  display: inline-block;
  animation: move 4s ease-in-out infinite; }
  
.words span:nth-child(2) { animation-delay: 0.3s; }
.words span:nth-child(3) { animation-delay: 0.6s; }
.words span:nth-child(4) { animation-delay: 0.9s; }
.words span:nth-child(5) { animation-delay: 1.2s; }
.words span:nth-child(6) { animation-delay: 1.5s; }
.words span:nth-child(7) { animation-delay: 1.8s; }
.words span:nth-child(8) { animation-delay: 2.1s; }
.words span:nth-child(9) { animation-delay: 2.4s; }
.words span:nth-child(10) { animation-delay: 2.7s; }
.words span:nth-child(11) { animation-delay: 3s; }
.words span:nth-child(12) { animation-delay: 3.3s; }
.words span:nth-child(13) { animation-delay: 3.6s; }
.words span:nth-child(14) { animation-delay: 3.9s; }
.words span:nth-child(15) { animation-delay: 4.2s; }
.words span:nth-child(16) { animation-delay: 4.5s; }
.words span:nth-child(17) { animation-delay: 4.8s; }
.words span:nth-child(18) { animation-delay: 5.1s; }

@keyframes move {
	0% { transform: translate(-0%, 0); }
	50% { text-shadow: 0 0 25px rgba(0, 0, 0, 0.15); }
	100% { transform: translate(0%, 0); }
}