JSFiddle - React, Tailwind, and code Playground

HTML

<div class="red"> <p>RED</p></div>
<div class="blue"> <p>BLUE</p></div>
<div><p>GREEN BECAUSE IT'S NOT RED</p></div>
<div class="brown"> <p>BROWN LOSES TO PURPLE</p></div>
<div class="brown"> <p>BROWN TO PURPLE</p></div>

CSS

p {text-align:center; line-height:50px}
div {
    background-color:purple;
    width:400px;
    height:50px;
}
.red{
    background-color:red;
}
.blue{
    background-color:blue;
}
.brown{
    background-color:brown;
}
div:not(.red){
    background-color:green;
}
div.brown{
    background-color:purple;
}