JSFiddle - React, Tailwind, and code Playground

HTML

<span id="sp"></span>
<input id="ax">
<span id="ou"></span>

JavaScript

var SI="Stafffff. ";
var sp=document.getElementById("sp");
sp.innerHTML=SI;
var out=document.getElementById("ou");
var AX=document.getElementById("ax");
var i = 0;
ax.addEventListener("input", function(e) {
    var result = '';
    for (var i = 0; i < ax.value.length; i++)
    {
        if (ax.value[i] == SI[i])
            result += ax.value[i];
        else
            break;
    }
    ou.innerHTML = result;
});