JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div id="title"><span id="name">Simon</span> Says:</div>
    <div id="message"></div>
</div>

CSS

.box {
    border:1px solid #E38E34;
    background-color: #FFE7BF;
    height:100px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#title {
    margin:5px;
    border-bottom:1px solid #E38E34;
    color:#C46908;
    font-weight:bold;
}

#message{
    margin:5px;
}

JavaScript

var timer, fullText, currentOffset, onComplete;

function Speak(person, text, callback) {
    $("#name").html(person);
    fullText = text;
    currentOffset = 0;
    onComplete = callback;
    timer = setInterval(onTick, 100);
}

function onTick() {
    currentOffset++;
    if (currentOffset == fullText.length) {
        complete();
        return;
    }
    var text = fullText.substring(0, currentOffset);
    $("#message").html(text);
}

function complete() {
    clearInterval(timer);
    timer = null;
    $("#message").html(fullText);
    onComplete();
}

$(".box").click(function () {
    complete();
});

Speak("Simon",
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",

function () {
    setTimeout(function(){
    Speak("Javascript", "Simon has finished speaking!");
    }, 2000);
});