JSFiddle - React, Tailwind, and code Playground
by Gwyn Milcote
HTML
<select class='search_colour'><option value='0'>Any colour</option><option value='11'>Pink</option><option value='12'>Violet</option><option value='21'>Red</option><option value='22'>Brown</option><option value='31'>Orange</option><option value='32'>Peach</option><option value='41'>Yellow</option><option value='42'>Champagne</option><option value='51'>Green</option><option value='52'>Olive</option><option value='61'>Blue</option><option value='62'>Turquoise</option><option value='71'>Indigo</option><option value='72'>Slate</option><option value='81'>Iridescent</option><option value='82'>Grey</option><option value='91'>Midnight</option><option value='92'>Lavender</option>
</select>
<select class='search_shade'><option value='0'>Any shade</option><option value='1'>Lightest</option><option value='2'>Lighter</option><option value='3'>Medium</option><option value='4'>Darket</option><option value='5'>Darkest</option></select>
<div id='search_colprev' style='width:40px;height:40px;padding:10px;border-radius:5px;'>.</div>
<p><span id='search_colwhat'></span></p>CSS
/* pink */
.col110 {background-image: linear-gradient(to right, #ffe7f2,#e44b97,#560132);}
.col111 {background-color:#ffe7f2;}
.col112 {background-color:#ed80b6;}
.col113 {background-color:#e44b97;}
.col114 {background-color:#b43275;}
.col115 {background-color:#560132;}
/* violet */
.col120 {background-image: linear-gradient(to right, #f9e3ff,#b744f3,#350061);}
.col121 {background-color:#f9e3ff;}
.col122 {background-color:#d992fb;}
.col123 {background-color:#b744f3;}
.col124 {background-color:#831dae;}
.col125 {background-color:#4a0060;}
/* red */
.col210 {background-image: linear-gradient(to right, #ffdddd,#e54242,#680000);}
.col211 {background-color:#ffdddd;}
.col212 {background-color:#f29090;}
.col213 {background-color:#e54242;}
.col214 {background-color:#a62121;}
.col215 {background-color:#680000;}
/* brown */
.col220 {background-image: linear-gradient(to right, #f6e2da,#c77755,#542713);}
.col221 {background-color:#f6e2da;}
.col222 {background-color:#dfad98;}
.col223 {background-color:#c77755;}
.col224 {background-color:#8d4f34;}
.col225 {background-color:#542713;}
/* orange */
.col310 {background-image: linear-gradient(to right, #ffe8cf,#f58d00,#633800);}
.col311 {background-color:#ffe8cf;}
.col312 {background-color:#fabb68;}
.col313 {background-color:#f58d00;}
.col314 {background-color:#ac6200;}
.col315 {background-color:#633800;}
/* peach */
.col320 {background-image: linear-gradient(to right, #fde7dd,#fcab88,#cb6640);}
.col321 {background-color:#fde7dd;}
.col322 {background-color:#fdc9b3;}
.col323 {background-color:#fcab88;}
.col324 {background-color:#e38864;}
.col325 {background-color:#cb6640;}
/* yellow */
.col410 {background-image: linear-gradient(to right, #fdf7e0,#ffc600,#6b4900);}
.col411 {background-color:#fdf7e0;}
.col412 {background-color:#fedf70;}
.col413 {background-color:#ffc600;}
.col414 {background-color:#b58700;}
.col415 {background-color:#6b4900;}
/* champagne */
.col420 {background-image: linear-gradient(to right,...JavaScript
var name11 = {"Rose": "1","Tulip": "2","Fuchsia": "3","Cherry": "4","Cranberry": "5"};
var name12 = {"Dawn": "1","Orchid": "2","Heliotripe": "3","Violet": "4","Byzantine": "5"};
var name21 = {"Salmon": "1","Coral": "2","Carnelian": "3","Scarlet": "4","Ruby": "5"};
var name22 = {"Almond": "1","Coffee": "2","Toast": "3","Cinnamon": "4","Chocolate": "5"};
var name31 = {"Shell": "1","Apricot": "2","Tangerine": "3","Copper": "4","Sienna": "5"};
var name32 = {"Blush": "1","Melon": "2","Peach": "3","Salamander": "4","Terracotta": "5"};
var name41 = {"Vanilla": "1","Lemon": "2","Gold": "3","Honey": "4","Mustard": "5"};
var name42 = {"Champagne": "1","Sand": "2","Desert": "3","Latte": "4","Walnut": "5"};
var name51 = {"Mint": "1","Jade": "2","Leaf": "3","Emerald": "4","Forest": "5"};
var name52 = {"Gooseberry": "1","Lime": "2","Olive": "3","Fern": "4","Moss": "5"};
var name61 = {"Ice": "1","Aquamarine": "2","Sky": "3","Ocean": "4","Indicolite": "5"};
var name62 = {"Seafoam": "1","Duck Egg": "2","Persian": "3","Myrtle": "4","Peacock": "5"};
var name71 = {"Cloud": "1","Azure": "2","Cobalt": "3","Indigo": "4","Navy": "5"};
var name72 = {"Mist": "1","Pigeon": "2","Slate": "3","Steel": "4","Dusk": "5"};
var name81 = {"Pearl": "1","Opal": "2","Rainbow": "3","Iridescent": "4","Oil": "5"};
var name82 = {"White": "1","Silver": "2","Stone": "3","Smoke": "4","Jet": "5"};
var name91 = {"Lilac": "1","Wysteria": "2","Amethyst": "3","Royal Purple": "4","Midnight": "5"};
var name92 = {"Thistle": "1","Lavender": "2","Heather": "3","Grape": "4","Raisin": "5"};
var name0 = {"Lightest": "1","Lighter": "2","Medium": "3","Darker": "4","Darkest": "5"};
$(".search_colour").change(function(){
var col = $(this).val();
$(".search_shade").empty().append($("<option></option>").attr("value", 0).text('Any shade'));
var opts = '';
if(col == 11){opts = name11;} if(col == 12){opts = name12;}
if(col == 21){opts = name21;} if(col == 22){opts = name22;}
if(col == 31){opts = name31;} if(col == 32){opts =...