JSFiddle - React, Tailwind, and code Playground

HTML

<select>
        <option value="blank">Blank</option>
        <option class="white" value="white">White</option>
        <option class="red" value="red">Red</option>
        <option class="blue" value="blue">Blue</option>
    </select>

CSS

body {
        background-color:#000;
    }    

    select {
        background-color:#FFF;
        color: #000;
    
        padding:10px;
        
        border-style:solid;
        border-width:1px;
        border-color:#C2C2C2;
    }
    
    select * {
        background-color:#000;
        color:#FFF;
    }
    
    select *.red { /* This, miraculously, styles the '<option class="red"></option>' elements. */
        background-color:#F00;
        color:#FFF;
    }

    select *.white {
        background-color:#FFF;
        color:#000;
    }
    
    select *.blue {
        background-color:#06F;
        color:#FFF;
    }