JSFiddle - React, Tailwind, and code Playground

HTML

<div id="r1" class="red">
    <div id="r2" class="pink">
        <div id="r3"></div>
    </div>
</div>

CSS

#r1 { width: 100px; height: 100px; border: solid 1px red; }
#r2 { width: 50px; height: 50px; border: solid 1px green; }
#r3 { width: 25px; height: 25px; border: solid 1px blue; }

.pink div {
    background: pink !important;
}

.red div {
    background: red;
}