JSFiddle - React, Tailwind, and code Playground

HTML

<div id="red">
    <span>red</span>
    <div class="blue">
        <span>blue(class) - should be blue</span>
    </div>
    <div id="green">
        <span>green(id) - should be green</span>
    </div>
    <div class="green">
        <span>green(class) - should be green</span>
    </div>
    <div>
        <span>no child div style - should still be red</span>
    </div>
</div>

CSS

#red span {
    color: red;
}
.blue span {
    color: blue;
}
.green, #green span {
    color: green;
}