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

$('#control a').click(function() {
    var idx = $(this).parent().index() + 1;
    $('.t' + idx).toggle();
    return false;
});