JSFiddle - React, Tailwind, and code Playground

HTML

<select id = "colorSlct" type = "select" class = "select2" style = "margin-left: 0;">
    <option id = "WHITE">  </option>
    <option id = "GRAY" .($s(color="GRAY":"selected='selected'",1:"")).> Gray </option>
    <option id = "PINK" #($s(color="PINK":"selected='selected'",1:""))#> Pink </option>
    <option id = "YELLOW" #($s(color="YELLOW":"selected='selected'",1:""))#> Yellow </option>
    <option id = "ORANGE" #($s(color="ORANGE":"selected='selected'",1:""))#> Orange </option>
</select>

CSS

#WHITE, .WHITE  {background-color: white;}
#GRAY, .GRAY   {background-color: rgb(194,194,194);}
#PINK, .PINK   {background-color: rgb(255,153,203);}
#YELLOW, .YELLOW {background-color: rgb(254,255,153);}
#ORANGE, .ORANGE {background-color: rgb(255,204,154);}

JavaScript

$(document).on('change', '#colorSlct', function() {
    $(this).removeClass().addClass($('option:selected').attr('id'));
});