JSFiddle - React, Tailwind, and code Playground

by vitorbarbosa

HTML

<script src="https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css">
<div class="container">
    <select class="color-select">
        <optgroup class="optgroup-blue" label="Bluehish">
            <option value="blue_1" class="option-blue-1">Blue 1</option>
            <option value="blue_2" class="option-blue-2">Blue 2</option>
            <option value="blue_3" class="option-blue-3">Blue 3</option>
        </optgroup>
        <optgroup class="optgroup-green" label="Greenish">
            <option value="green_1" class="option-green-1">Green 1</option>
            <option value="green_2" class="option-green-2">Green 2</option>
            <option value="green_3" class="option-green-3">Green 3</option>
        </optgroup>
    </select>
</div>

CSS

.container {
    padding: 10px;
}

.color-select {
    width: 150px;
}

.option-blue-1,
.chzn-container-single .option-blue-1 {
    background-image: none;
    background-color: #4A7BAF;
    color: white;
}

.option-blue-2,
.chzn-container-single .option-blue-2 {
    background-image: none;
    background-color: #224D7C;
    color: white;
}

.option-blue-3,
.chzn-container-single .option-blue-3 {
    background-image: none;
    background-color: #84ABD6;
    color: white;
}

.option-green-1,
.chzn-container-single .option-green-1 {
    background-image: none;
    background-color: #629F7E;
    color: white;
}

.option-green-2,
.chzn-container-single .option-green-2 {
    background-image: none;
    background-color: #34915F;
    color: white;
}

.option-green-3,
.chzn-container-single .option-green-3 {
    background-image: none;
    background-color: #6AE1A1;
    color: white;
}

.chzn-container-single .chzn-single {
    padding: 0;
}

.chzn-container-single .chzn-single span {
    margin-left: 8px;
}

JavaScript

jQuery(document).ready(function($){
    $(".color-select").chosen({no_results_text: "No results matched"});
    
    //APPLY CHANGE MANUALLY
    $(".color-select").change(function(){
        $(".chzn-single").attr("class", "").addClass("chzn-single").addClass($(".result-selected").attr("class")).removeClass("active-result group-option result-selected");
    });
    
    $(".chzn-single").addClass($(".color-select").find(":selected").attr("class"));
});