JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="control">
    <li><a href="#">text 1</a></li>
    <li><a href="#">text 2</a></li>
    <li><a href="#">text 3</a></li>
</ul>

<div id='C'>
    <p>
        <span class="P">
            text. 
            <span class="t1">Text 1</span> 
            <span class="t2">Text 2</span> 
            <span class="t3">Text 3</span> 
            text.
        <span>
    </p>
    <p>
        <span class="P">
            text. 
            <span class="t1">Text 1</span> 
            <span class="t2">Text 2</span> 
            <span class="t3">Text 3</span> 
            text.
        <span>
    </p>
</div>

CSS

#control { margin-bottom:20px; }
#control li { display:inline; }

.t1 { background-color:rgba(255,0,0,0.2); }
.t2 { background-color:rgba(0,255,0,0.2); }
.t3 { background-color:rgba(0,0,255,0.2); }

a { color:blue; }

JavaScript

window.sh = (function() {
    function toggleVisibility(element) {
        element.style.display = (element.style.display === 'none') ? '' : 'none';
    }

    if(typeof document.querySelectorAll === 'function') {
        return function(cls) {
            var spans = document.querySelectorAll('span.' + cls);
            for (var i = spans.length; i--;) {
                toggleVisibility(spans[i]);
            }
        };
    }
    else {
        var spans = document.getElementsByTagName('span');
        return function(cls) {
            for (var i = spans.length; i--;) {
                var element = spans[i];
                if (element.className.match(RegExp('\\b' + cls + '\\b'))) {
                    toggleVisibility(element);
                }
            }
       };
    } 
}());