JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="qtabs">
    <li><a href="{show tab1}">tab 1 title</a></li>
    <li class="active"><a href="{show tab2}">tab 2 title</a></li>
    <li><a href="{show tab3}">tab 3 title</a></li>
</ul>

<div class="tab-container">

    <div id="tab1">
        other stuff that doesn't change
        <div class="tab-content">text, text, text, text....</div>
    </div>

    <div id="tab2">
        other stuff that doesn't change
        <div class="tab-content">text, text, text, text....</div>
    </div>

    <div id="tab3">
        other stuff that doesn't change
        <div class="tab-content">text, text, text, text....</div>
    </div>

</div>

CSS

.qtabs:hover ~ .tab-container #tab1 .tab-content {
    color:red;
}

.qtabs:hover ~ .tab-container #tab2 .tab-content {
    color:green;
}

.qtabs:hover ~ .tab-container #tab3 .tab-content {
    color:blue;
}