JSFiddle - React, Tailwind, and code Playground

HTML

<!--
It's important that no option inherit its background color
from the select. If an option was to inherit the background
color, then when the select's background color changes, so will
that of the option. Remove the background color from GHI to
see this potential problem.
-->
<select id="theSelect">
    <option selected class='w'>Pick an Option</option>
    <option class='x'>ABC</option>
    <option class='y'>DEF</option>
    <option style="background-color:Orange">GHI</option>
    <option class='z' style="background-color:OrangeRed">JKL</option>
</select>

CSS

.w { background-color: Yellow }
.x { background-color: SeaGreen }
.y { background-color: DarkSalmon }
.z { background-color: LightSlateGray }

JavaScript

function documentReady() {
  var selectedItem = $('#theSelect :selected');
  $('#theSelect').css('backgroundColor', selectedItem.css('backgroundColor'));
  
  $('#theSelect').change(function() {
    var selectedItem = $(this).find("option:selected");
    $(this).css('backgroundColor', selectedItem.css('backgroundColor'));
  });
}
                   
jQuery(document).ready(documentReady);