JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="my_text">ONE WORD Other words here</li>
    <li class="my_text">ONE WORD Other words here</li>
    <li class="my_text">ONE WORD Other words here</li>
    <li class="my_text">ONE WORD Other words here</li>
</ul>

CSS

span {color: red;}

JavaScript

function wrapCaps() {
    var text = document.getElementByClass("my_text").value;
    for(i=0; i < text.length; i++) {
        if(text[i].charCodeAt(text[i]) >= 65 && text[i].charCodeAt(text[i]) <= 90)
        wrapNode(text[i], 'span');
    }
}