JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<select class='aaa'>
<option value='1'>Red (Salmon/Coral/Carnelian/Blood/Mahogany)</option>
	<option value='2'>Brown (Almond/Coffee/Toast/Cinnamon/Chocolate)</option>
	<option value='3'>Orange (Shell/Peach/Tangerine/Bronze/Sienna)</option>
	<option value='4'>Yellow (Vanilla/Lemon/Gold/Goldenrod/Mustard)</option>
	<option value='5'>Yellow-Green (Gooseberry/Olive/Lime/Fern/Moss)</option>
	<option value='6'>Green (Mint/Jade/Leaf/Emerald/Forest)</option>
	<option value='7'>Green-Blue (Pearl/Duckegg/Persian/Myrtle/Peacock)</option>
	<option value='8'>Blue (Ice/Aquamarine/Sky/Ocean/Indicolite)</option>
	<option value='9'>Deep Blue (Cloud/Azure/Cobalt/Indigo/Navy)</option>
	<option value='10'>Blue-Grey (Mist/Pigeon/Slate/Steel/Dusk)</option>
	<option value='11'>Grey (White/Silver/Stone/Smoke/Jet)</option>
	<option value='12'>Blue-Purple (Thistle/Lavender/Heather/Grape/Raisin)</option>
	<option value='13'>Purple (Lilac/Wisteria/Amethyst/Purple/Midnight)</option>
	<option value='14'>Purple-Pink (Dawn/Orchid/Heliotrope/Violet/Byzantine</option>
	<option value='15'>Pink (Rose/Tulip/Fuchsia/Cherry/Cranberry)</option>
</select>

<br>
<select>
<option value='1'>Red (Salmon/Coral/Carnelian/Blood/Mahogany)</option>
	<option value='2'>Brown (Almond/Coffee/Toast/Cinnamon/Chocolate)</option>
	<option value='3'>Orange (Shell/Peach/Tangerine/Bronze/Sienna)</option>
	<option value='4'>Yellow (Vanilla/Lemon/Gold/Goldenrod/Mustard)</option>
	<option value='5'>Yellow-Green (Gooseberry/Olive/Lime/Fern/Moss)</option>
	<option value='6'>Green (Mint/Jade/Leaf/Emerald/Forest)</option>
	<option value='7'>Green-Blue (Pearl/Duckegg/Persian/Myrtle/Peacock)</option>
	<option value='8'>Blue (Ice/Aquamarine/Sky/Ocean/Indicolite)</option>
	<option value='9'>Deep Blue (Cloud/Azure/Cobalt/Indigo/Navy)</option>
	<option value='10'>Blue-Grey (Mist/Pigeon/Slate/Steel/Dusk)</option>
	<option value='11'>Grey (White/Silver/Stone/Smoke/Jet)</option>
	<option value='12'>Blue-Purple...

CSS

.aaa option[value="1"]{background:#fca2a2;}
.aaa option[value="2"]{background:#e2ae98;}
.aaa option[value="3"]{background:#fdc688;}
.aaa option[value="4"]{background:#fee78b;}
.aaa option[value="5"]{background:#dff78b;}
.aaa option[value="6"]{background:#86ee89;}
.aaa option[value="7"]{background:#addfd5;}
.aaa option[value="8"]{background:#8eebf5;}
.aaa option[value="9"]{background:#87abfc;}
.aaa option[value="10"]{background:#abb8d6;}
.aaa option[value="11"]{background:#cfcfcf;}
.aaa option[value="12"]{background:#c9b3db;}
.aaa option[value="13"]{background:#cd90ff;}
.aaa option[value="14"]{background:#eb94fd;}
.aaa option[value="15"]{background:#f794c4;}