JSFiddle - React, Tailwind, and code Playground

by alnitak

HTML

<div id="holder">
    <div id="target" style="display:none"></div>
</div>

<button id="start">Start</button>

CSS

#holder {
    height: 40px;
}

JavaScript

$('document').ready(function() {


    $('#start').click(function() {
        $('#target').stop(true, true).html("This is one.").css('color', '#000000').fadeIn(1000).fadeOut(2000).queue(function() {
            $(this).html("This is two.").css('color', '#dc0000');
            $(this).dequeue();
        }).fadeIn(1000).fadeOut(2000).queue(function() {
            $(this).html("This is three").css('color', '#990099');
            $(this).dequeue();
        }).fadeIn(1000).fadeOut(2000);
    });
});