JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <span class="span1">Hover over me</span>
    <br>
    <span class="span2">This font colour changes as required.</span>
    <br>
    <table>
        <tr>
            <td>
                <span class="span2">This font colour doesn't change, why?</span>
            </td>
        </tr>
    </table>
</div>        
        <br><br>

CSS

.wrapper:hover .span2{
    color: red;
}