JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="main">
    <span>L</span>
    <span>U</span>
    <span>K</span>
    <span>A</span>
</div>

CSS

body {
    margin: 0;
}
div.main {
    text-align: center;
    font-size: 60px;
}
span {
    opacity: 0;
    display: inline-block;
}
span:nth-child(1){
    transform: translateX(-150px);
}
span:nth-child(2){
    transform: translateX(-100px);
}
span:nth-child(3){
    transform: translateX(100px);
}
span:nth-child(4){
    transform: translateX(150px);
}
div.main.active span {
    transition: 1s;
    opacity: 1;
    transform: translateX(0);    
}

JavaScript

document.querySelector('.main').classList.add('active')