JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="item active" data-id="1">
    <div class="quote">a</div>
</div>
<div class="item" data-id="2">
    <div class="quote">b</div>
</div>
<div class="item" data-id="3">
    <div class="quote">b</div>
</div>

CSS

body {
    background: black;
    margin: 0;
}
* {
    box-sizing: border-box;
    color: white;
}
.item {
    text-align: center;
    font-size: 120px;
    opacity: 0;
    width: 100%;
    transition: 1s;
    position: absolute;
}
.item.active {
    opacity: 1;
}

JavaScript

var count = 0;
var id = 1;
var fn = function(){
	count++;
    if(count === 60){
    	id++;
        if(id === 3){
        	id = 1;
        }
    	count = 0;
    	func();
    }
	requestAnimationFrame(fn)
}
fn();
var func = function(){
	document.querySelector('[data-id="' + id + '"]').classList.remove('active')
	demo();
}
var demoCount = 0;
var demo = function(){
	demoCount++;
    if(demoCount === 60){
    	document.querySelector('[data-id="' + id + '"]').classList.add('active')
      
    }
	requestAnimationFrame(demo)
}