JSFiddle - React, Tailwind, and code Playground

HTML

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

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

CSS

#holder {
    height: 40px;
}

JavaScript

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

                });
            });