JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="qtabs activeTab2">
    <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">
        <div class="tab-content">text, text, text, text....</div>
    </div>

    <div id="tab2" >
        <div class="tab-content">text, text, text, text....</div>
    </div>

    <div id="tab3">
        <div class="tab-content">text, text, text, text....</div>
    </div>

</div>

CSS

/*#tab1:hover .tab-content {color:#f00;}*/

ul.activeTab1:hover + .tab-container #tab1 .tab-content {color:#f00;}
ul.activeTab2:hover + .tab-container #tab2 .tab-content {color:#f00;}