JSFiddle - React, Tailwind, and code Playground
HTML
<select id="color_me" class="">
<option class="green">successful</option>
<option class="orange">process failure</option>
<option class="pink">abandoned</option>
</select>
<select>
<option value="item 1" class="red">Item 1</option>
<option value="item 2" class="blue">Item 2</option>
<option value="item 3" class="white">Item 3</option>
</select>
CSS
.green {
background-color: green;
}
.orange {
background-color: orange;
}
.pink {
background-color: pink;
}
.important { background-color:yellow; }
.sorta-important { background-color:lightyellow; }
option.red {background-color:red}
option.blue {background-color:blue}
option.white {background-color:white}
JavaScript
$("#color_me").change(function(){
var color = $("option:selected", this).attr("class");
$("#color_me").attr("class", color);
});