JSFiddle - React, Tailwind, and code Playground

by PhillipSenn

HTML

<div id="matrix">	
	<div class="a">xyza-bc</div>
    <div class="b">1234-56</div>
    <div class="delay" style="left:290px;">abcd-xx</div>
</div>

CSS

#matrix{
    font-family:"Times New Roman";
    font-size:20px;
    margin: 1em auto;
    width: 450px;
    height: 288px;
    overflow: hidden;
    background: #000;
    color: rgba(0, 255, 0, .7);
    position: relative;	
}
@-webkit-keyframes fall{
    from {top: 0px;}
    to 	{top: 280px;}
}


#matrix div{
    /* writing-mode: tb-rl; - ughh. doesn't work */
    position: absolute;	
    
    /* animation */
    -webkit-animation-name: fall;			
    -webkit-animation-iteration-count: infinite; /* use 0 to infinite */
    -webkit-animation-duration: 6s;
}
.delay{	
    -webkit-animation-delay: 3s;
}

.a {left:170px}
.b {left:250px}