JSFiddle - React, Tailwind, and code Playground

by tinyhustlee

HTML

<select class="select required form-control" id="tag_item_color" name="tag_item[color]">sadasd
    <option value="black">black</option>
    <option value="silver">silver</option>
    <option value="gray">gray</option>
    <option value="maroon">maroon</option>
    <option value="red">red</option>
    <option value="purple">purple</option>
    <option value="fuchsia">fuchsia</option>
    <option value="green">green</option>
    <option value="lime">lime</option>
    <option value="olive">olive</option>
    <option value="yellow">yellow</option>
    <option value="navy">navy</option>
    <option value="blue">blue</option>
    <option value="teal">teal</option>
    <option value="aqua">aqua</option>
</select>

SCSS

select {
    width: 200px;
    height: 200px;
    option {
        height: 200px;
    }
    span {
        display: inline-block;
        width: 100px;
        height: 100px;
    }
}

JavaScript

$('#tag_item_color option').each(function () {
    var color = $(this).text()
    $(this).html(
        "<span style='background-color:" + color + ";'></span>" + color)
})