JSFiddle - React, Tailwind, and code Playground

HTML

<blockquote>
  <div id="miaulement"></div>
  <div class="arrow bottom right"></div>
</blockquote>

<div id="chat">😼</div>

<button id="go">go()</button>

CSS

#cat {
  margin-top: 0.3em;
  font-size: 10em;
}

button {
  background: #0a0;
  color: white;
  border-radius: 0.2em;
  border-width: 0.07em;
  padding: 0.2em 3em;
  font-size: 3em;
}

/*
 * Speech bubble CSS lifted from
 *   http://natashatherobot.com/speech-bubble-css/
 * this time! Thanks!
 */

blockquote {
    background-color: #f8f8f8;
    border: 2px solid #c8c8c8;
    border-radius: 1em;
    height: 1.5em;
    width: 22em;
    text-align: center;
    padding: 20px;
    position: relative;
}

blockquote .arrow {
    border-style: solid;
    position: absolute;
}

.bottom {
    border-color: #c8c8c8 transparent transparent transparent;
    border-width: 13px 13px 0px 13px;
    bottom: -13px;
}

.bottom:after {
    border-color: #f8f8f8 transparent transparent transparent;
    border-style: solid;
    border-width: 13px 13px 0px 13px;
    bottom: 2.8px;
    content: "";
    position: absolute;
    left: -12.5px;
}

JavaScript

function go() {
  var messages = ["Miaou !", "Je suis un chat qui parle !", "Les callbacks c'est rigolo !"];

  for (var i = 0; i < messages.length; i++) {
    setTimeout(function () {
      cat.say(messages[i]);
    }, i * 1500);
  }
}


var cat = {
  speech: document.getElementById("miaulement"),
  cat: document.getElementById("chat"),
  say: function (quip) {
    this.speech.textContent = "" + quip;
    this.cat.textContent = "😸";
    setTimeout(function () {
      this.speech.textContent = "";
      this.cat.textContent = "😼";
    }.bind(this), 1250);
  }
};

document.getElementById("go").addEventListener("click", function () { go(); });