JSFiddle - React, Tailwind, and code Playground

HTML

<p class="area1">Text Area 1</p>

<p class="area2">Text Area 2</p>

<p class="area3">Text Area 3</p>

<button class="button">click me</button>

CSS

.area1, .area2, .area3 {
    height: 50px;
    width: 150px;
}

.area1 {
    color: red;
}

.area2 {
    color: blue;
}

.area3 {
    color: green;
}

JavaScript

$(function() {
    
	$.fn.showDialogue = function(fadeInTime, showTextTime) {
		this.fadeIn(fadeInTime).delay(showTextTime);
		return this;
	};

	$.fn.prepareDialogue = function(fadeOutTime, dialogue) {
		this.fadeOut(fadeOutTime, function() {
			$(this).html(dialogue);
		});
		return this;
	};

	function startIntroduction2() {
		var p1Text = $(".area1");
		var p2Text = $(".area2");
		var p2InnerText = $(".area3");
		p1Text.hide();
		p2Text.hide();
		p2InnerText.hide();
        
        dialogueExchange1();
        
		function dialogueExchange1() {
			p1Text.text("hey");
            p1Text.delay(1000).showDialogue(800, 3000).prepareDialogue(800, "hey, are you awake?");
            
            $('.area1, .area2, .area3').promise().done(function() {
            dialogueExchange2();     
            });
		}

		function dialogueExchange2() {
			p1Text.delay(900).showDialogue(800, 4000).prepareDialogue(800, "wake up");

			p2InnerText.text("...");
			p2InnerText.delay(1800).showDialogue(800, 1500).fadeOut(800);
                
                $('.area1, .area2, .area3').promise().done(function() {
            dialogueExchange3();     
                });
		}
        
        function dialogueExchange3() {
			p1Text.delay(900).showDialogue(800, 4000).prepareDialogue(800, "come on let's go");

			p2Text.text("hold on");
			p2Text.delay(1800).showDialogue(800, 1500).fadeOut(800);
		}
	}

	$('button').click(function() {
		startIntroduction2();
	});
});