JSFiddle - React, Tailwind, and code Playground

by Yeah

HTML

<pre>:</pre><pre id="o">o</pre><pre id="i">         c====3</pre>

CSS

body {
    padding:15%;
}
pre {
    margin:0;
    font-size: 4em;
    float:left;
}
#o {
    color:red;
}

JavaScript

var t=document.getElementById("i"),s=t.textContent,o=5,x=setInterval(function(){s=(3==s.length&&o--?"==":"")+s.substr(1),t.textContent=s,1==s.length&&clearInterval(x)},300);