JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    This is a test <b>Other HTML should not be affected by manipulations</b>
</p>

CSS

span { color: red; }

JavaScript

(function () { 
    var node = $("p").contents().filter(function () { return this.nodeType == 3 }).first(),
        text = node.text().trim(),
        first = text.slice(0, 1);
    
    if (!node.length)
        return;
    
    node[0].nodeValue = text.slice(first.length);
    node.before('<span>' + first + '</span>');
})();