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" style="display:none;">
        other stuff that doesn't change
        <div class="tab-content">text, text, text, text....</div>
    </div>

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

</div>

CSS

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