JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <label for="iblock">Inline Block Letters</label>
    <input id="iblock" type="checkbox" />
</div>
<p id="textplode">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac nunc velit, id fermentum elit. Nunc augue lacus, bibendum at cursus at, placerat sit amet tellus. Suspendisse eget lorem erat. Quisque volutpat, leo sed pharetra cursus, ligula lorem posuere magna, eget suscipit felis urna adipiscing odio. Praesent quam lacus, iaculis vel aliquam et, gravida in tortor. Quisque magna urna, laoreet venenatis commodo vitae, <a href="#">ultricies elementum erat</a>. In sed lacus lacus, ut dapibus quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Cras ac lacus id felis scelerisque laoreet id vitae sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Donec gravida neque in sapien sagittis eu lobortis arcu venenatis. Etiam quis erat eu velit aliquam commodo porttitor vel lectus. Curabitur massa leo, consectetur id egestas vitae, aliquam et libero.
        </p>

CSS

label {
    cursor: pointer;
}
div {
    margin: 0 0 2em;
}
p.iblock span {
    display: inline-block;
}

JavaScript

function letterWrap(tag, el, sub) {
    var qContent = el.childNodes,
        contentLen = qContent.length,
        elCurr,
        currNT,
        letters,
        letLen,
        letHTML = [],
        newML = [];

    for(var x=0;x<contentLen;++x) {
        elCurr = qContent[x];
        currNT = elCurr.nodeType;
        
        if(currNT === 1) { // HTML element
            newML.push(
                letterWrap(tag, elCurr, true)
            );
        } else if(currNT === 3) { // Text node
            letters = elCurr.nodeValue.split('');
            letLen = letters.length;
            letHTML = [];
            
            for(var y=0;y<letLen;++y) {
                letHTML.push('<'+tag+'>'+letters[y]+'</'+tag+'>');
            }
            
            newML.push(
                letHTML.join('')
            );
        }
    }
    
    if(sub) { // Is 'el' a sub-element?
        el.innerHTML = newML.join('');
        return el.outerHTML;
    } else {
        el.innerHTML = newML.join('');
        return el.querySelectorAll(tag);
    }
}

var textPlode = document.getElementById('textplode');
letterWrap('span', textPlode);

document.getElementById('iblock').addEventListener('change', function() {
    textPlode.className =
        ~textPlode.className.indexOf('iblock')
            ? ''
            : 'iblock';
});