JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <ul>
        <li><span data-color="red">Text 1</span>
        </li>
        <li><span data-color="blue">Text 2</span>
        </li>
        <li><span data-color="yellow">Text 3</span>
        </li>
    </ul>
</div>

CSS

#parent {
    background: #fff;
}
#parent.parent__clicked {
    background: #bada55;
}

JavaScript

//We attach a click handler on the nearest common parent.
//This allows us to have only one event handler, which is better
//For performance!
document.getElementById("parent").onclick = function (e) {
    //We only want events on the spans, so let's check that!
    if (e.target.tagName.toLowerCase() == "span") {
        this.className = "parent__clicked";
        //This is for the sake of example only!
        //TODO: A better approach would be to add a class
        //And define a CSS rule for that class.
    }
};