JSFiddle - React, Tailwind, and code Playground

by jtbowden

HTML

enter code here
<select id="colorSlct" type="select" class="select2" style="margin-left: 0;">
    <option class="WHITE"></option>
    <option class="GRAY" selected="selected">Gray</option>
    <option class="PINK">Pink</option>
    <option class="YELLOW">Yellow</option>
    <option class="ORANGE">Orange</option>
</select>

CSS

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

JavaScript

function changeSel() {
    var selected = $("option:selected", "#colorSlct");
    $("#colorSlct").removeClass().addClass(selected[0].className);
}

changeSel()

$(document).on('change', '#colorSlct', changeSel);