JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<span class="cb">Some Text</span>
<span class="cb">Some Text</span>
<span class="cb">Some Text</span>
<span class="cb">Some Text</span>
<span class="cb">Some Text</span>
<span class="cb">Some Text</span>
<span class="cb">Some Text</span>
<span class="cb">Some Text</span>
<span class="cb">Some Text</span>

CSS

body {background-color:#000000;}
.cb {

background: linear-gradient(0deg, rgba(153,153,153,1) 0%, rgba(34,34,34,1) 100%);

padding:10px;display:block;margin-bottom:1px;
transform: perspective(50em) rotateX(-90deg);
transform-origin: top center; 
transition:all 0.5s ease-in;

color:#dedede;}

.ob {

background: linear-gradient(0deg, rgba(34,34,34,1) 40%, rgba(102,102,102,1) 100%);

transform: rotateX(0deg); 
transition:all 0.5s ease-in;}

JavaScript

var blinds = document.getElementsByClassName('cb');

for (let i = 0; i < blinds.length; i++) {
  loop(i);
}

function loop(i){
  setTimeout(function(){
    blinds[i].className = "cb ob";
  }, 200 * i)
}