JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<div class="category">
 <select class="rating">
  <option value=""></option>        
  <option value="good">Good</option>
  <option value="medium">Medium</option>
  <option value="bad">Bad</option>
 </select> 
</div>

<div class="category">
 <select class="rating">
  <option value=""></option>        
  <option value="good">Good</option>
  <option value="medium">Medium</option>
  <option value="bad">Bad</option>
 </select>
</div>

CSS

.category {
    width: 400px;
    height: 100px;
    border: solid black 1px;
}

.bad {
    background-color: red;
}
.medium {
    background-color: yellow;
}
.good{
    background-color: green;
}

JavaScript

$('.rating').change(function(){
    $(this).parent().removeClass("good medium bad").addClass(this.value);
});