JSFiddle - React, Tailwind, and code Playground

HTML

<div id="infoBox"></div>

CSS

#infoBox {
    width:400px;
    height:400px;
    border:1px solid black;
    padding:2px;
}

JavaScript

function communicate(dialog) {
	if (dialog.length === 24) {
		messageIcon(3);
		setTimeout(function() {
			callExample(dialog);
		}, 2500);
	} else if (dialog.length > 24) {
		alert('oops');
	}
}

function messageIcon(time) {
	$('#infoBox').append("<span class='icon'>...</span>");
	for (i=0;i<time;i++) {
		$('.icon').fadeIn('fast');
		$('.icon').fadeOut('slow');
		if (i === time) {
			$('#infoBox .icon').remove();			
		}
	}
}

function callExample(message) {
	$('#infoBox').append("<span>example &gt; "+message+"</span>");
}

communicate("this is only an example.");