JSFiddle - React, Tailwind, and code Playground

HTML

<b>Red Apple Page</b>
<ul class="navigation">
    <li class="active"><a href="#">Fruit</a>
        <ul>
            <li>Banana
                <ul>
                    <li><a href="#">Yellow</a></li>
                    <li><a href="#">Green</a></li>
                </ul>
            </li>
            <li class="active"><a href="#">Apple</a>
                <ul>
                    <li><a href="#">Green</a></li>
                    <li class="active"><a href="#">Red</a> (only this element should be highlighted)</li>
                    <li><a href="#">Yellow</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Vegetables</a></li>
</ul>


<b>Apple (all colours) Page</b>
<ul class="navigation">
    <li class="active"><a href="#">Fruit</a>
        <ul>
            <li>Banana
                <ul>
                    <li><a href="#">Yellow</a></li>
                    <li><a href="#">Green</a></li>
                </ul>
            </li>
            <li class="active"><a href="#">Apple</a> (only this element should be highlighted)
                <ul>
                    <li><a href="#">Green</a></li>
                    <li><a href="#">Red</a></li>
                    <li><a href="#">Yellow</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Vegetables</a></li>
</ul>

SCSS

ul li.active > a {
    background: #FFD39B;
}