JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div class="selector"></div>

JavaScript

var anim = {
	config: {
    	slideDelay: 1000, 	// Each step will take 1 second
        intervalDelay: 8000 // The entire loop will wait 8 seconds between iterations
    },
    run: function(selector){ 
    	console.log('test');
        $('.selector').html('Different').css({ // Change any CSS Components (Stage1)
        	'background'	: '#7ec4bf',
            'color'			: '#14143a',
            'font-size'		: '20px'
        }).animate({ // Option to animate components (Stage1)
            'font-weight'	: 400
        }, anim.config.slideDelay, function(){
        	$('.selector').html('Distinct').css({ // Change any CSS Components (Stage2)
                'background'	: '#14143a',
                'color'			: '#FFFFFF',
            	'font-size'		: '10px'
            }).animate({ // Option to animate components (Stage2)
                'font-weight'	: 600
            }, anim.config.slideDelay, function(){
				$('.selector').html('People').css({ // Change any CSS Components (Stage3)
                    'background'	: '#b0a893'
                }).animate({ // Option to animate components (Stage3)
                    'font-weight'	: 900
                }, anim.config.slideDelay, function(){
                	$('.selector').html('Want').css({ // Change any CSS Components (Stage4)
                        'background'	: '#39779f',
                        'color'			: '#14143a',
           				'font-size'		: '30px'
                    }).animate({ // Option to animate components (Stage4)
                        'font-weight'	: 100
                    }, anim.config.slideDelay);
                });
            });
        });
    }
};

var test = setInterval(anim.run, anim.config.intervalDelay);