JSFiddle - React, Tailwind, and code Playground

HTML

<div class=container>
       <select name="fancySelect" class="makeMeFancy">
            <option value="0" selected="selected" data-skip="1">Email Color Scheme</option>
            <option value="81" data-colors='{ "color1": "993300", "color2": "000000" }' data-html-text="Brown on Black">Brown on Black</option>
            <option value="77" data-colors='{ "color1": "663366", "color2": "000000" }' data-html-text="Purple on Black">Purple on Black</option>
            <option value="129" data-colors='{ "color1": "00ccff", "color2": "000000" }' data-html-text="Teal on Black">Teal on Black</option>
            <option value="75" data-colors='{ "color1": "666666", "color2": "000000" }' data-html-text="Dark Gray on Black">Dark Gray on Black</option>
            <option value="85" data-colors='{ "color1": "999999", "color2": "000000" }' data-html-text="Gray on Black">Gray on Black</option>
            <option value="81" data-colors='{ "color1": "993300", "color2": "000000" }' data-html-text="Brown on Black">Brown on Black</option>
            <option value="77" data-colors='{ "color1": "663366", "color2": "000000" }' data-html-text="Purple on Black">Purple on Black</option>
            <option value="129" data-colors='{ "color1": "00ccff", "color2": "000000" }' data-html-text="Teal on Black">Teal on Black</option>
            <option value="75" data-colors='{ "color1": "666666", "color2": "000000" }' data-html-text="Dark Gray on Black">Dark Gray on Black</option>
            <option value="85" data-colors='{ "color1": "999999", "color2": "000000" }' data-html-text="Gray on Black">Gray on Black</option>
            <option value="81" data-colors='{ "color1": "993300", "color2": "000000" }' data-html-text="Brown on Black">Brown on Black</option>
            <option value="77" data-colors='{ "color1": "663366", "color2": "000000" }' data-html-text="Purple on Black">Purple on Black</option>
            <option value="129" data-colors='{ "color1": "00ccff", "color2":...

CSS

.container {
    padding: 1em;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: inline-block;
    background-style: solid;
    
}

.container select {
    font-size: 22px;
    font-family: sans-serif;
    font-weight: bold;
    border: 0px none;
    padding: 5px;
    border-radius: 3px;
    
    color: inherit;
    background-color: inherit;
}

.sample {
    font-size: 22px;
    font-weight: bold;
    font-family: sans-serif;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-left: 2em;
    border-radius: 5px;
    padding: 1em;
    display: inline-block;
}

JavaScript

$("select").on("change", function() {
    var
        select = this,
        $select = $(select),
        $container = $select.closest(".container"),
        $selected = $select.find("option:selected"),
        colors = $selected.data("colors");
    
    if (colors) {
        $select.css({
            color: "#" + colors.color1,
            backgroundColor: "#" + colors.color2
        });
    }
    else {
        $select.css({ color: "", backgroundColor: "" });
    }
});