JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<select class='search_colour'><option value='0'>Any colour</option><option value='1'>Red</option><option value='2'>Brown</option><option value='3'>Orange</option><option value='4'>Yellow</option><option value='5'>Olive</option><option value='6'>Green</option><option value='7'>Turquoise</option><option value='8'>Blue</option><option value='9'>Indigo</option><option value='10'>Slate</option><option value='11'>Grey</option><option value='12'>Lavender</option><option value='13'>Purple</option><option value='14'>Magenta</option><option value='15'>Pink</option><option value='16'>Pearl</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>

CSS

.col010 {background-image: linear-gradient(to right, #ffdddd,#eb3939,#680000);}
.col011 {background-color:#ffdddd;}
.col012 {background-color:#fca2a2;}
.col013 {background-color:#eb3939;}
.col014 {background-color:#af0e0e;}
.col015 {background-color:#680000;}
.col020 {background-image: linear-gradient(to right, #f6e2da,#c77755,#542713);}
.col021 {background-color:#f6e2da;}
.col022 {background-color:#e2ae98;}
.col023 {background-color:#c77755;}
.col024 {background-color:#8c4526;}
.col025 {background-color:#542713;}
.col030 {background-image: linear-gradient(to right, #ffeadd,#f69209,#764300);}
.col031 {background-color:#ffeadd;}
.col032 {background-color:#fdc688;}
.col033 {background-color:#f69209;}
.col034 {background-color:#be6e00;}
.col035 {background-color:#764300;}
.col040 {background-image: linear-gradient(to right, #fdf7e0,#fcca02,#795b00);}
.col041 {background-color:#fdf7e0;}
.col042 {background-color:#fee78b;}
.col043 {background-color:#fcca02;}
.col044 {background-color:#cb9900;}
.col045 {background-color:#795b00;}
.col050 {background-image: linear-gradient(to right, #f6ffd5,#aedb0f,#405300);}
.col051 {background-color:#f6ffd5;}
.col052 {background-color:#dff78b;}
.col053 {background-color:#aedb0f;}
.col054 {background-color:#739401;}
.col055 {background-color:#405300;}
.col060 {background-image: linear-gradient(to right, #cdffce,#13db18,#005002);}
.col061 {background-color:#cdffce;}
.col062 {background-color:#86ee89;}
.col063 {background-color:#13db18;}
.col064 {background-color:#019905;}
.col065 {background-color:#005002;}
.col070 {background-image: linear-gradient(to right, #dff5ef,#4ab29c,#194b42);}
.col071 {background-color:#dff5ef;}
.col072 {background-color:#addfd5;}
.col073 {background-color:#4ab29c;}
.col074 {background-color:#2a7f6f;}
.col075 {background-color:#194b42;}
.col080 {background-image: linear-gradient(to right, #e0fcff,#0fd8ee,#005f6a);}
.col081 {background-color:#e0fcff;}
.col082 {background-color:#8eebf5;}
.col083...

JavaScript

var options1 = {"Salmon": "1","Coral": "2","Carnelian": "3","Blood": "4","Mahogany": "5"};
var options2 = {"Almond": "1","Coffee": "2","Toast": "3","Cinnamon": "4","Chocolate": "5"};
var options3 = {"Shell": "1","Peach": "2","Tangerine": "3","Copper": "4","Sienna": "5"};
var options4 = {"Vanilla": "1","Lemon": "2","Gold": "3","Honey": "4","Mustard": "5"};
var options5 = {"Goosebery": "1","Olive": "2","Lime": "3","Fern": "4","Moss": "5"};
var options6 = {"Mint": "1","Jade": "2","Leaf": "3","Emerald": "4","Forest": "5"};
var options7 = {"Pearl": "1","Duck Egg": "2","Persian": "3","Myrtle": "4","Peacock": "5"};
var options8 = {"Ice": "1","Aquamarine": "2","Sky": "3","Ocean": "4","Indicolite": "5"};
var options9 = {"Cloud": "1","Azure": "2","Cobalt": "3","Indigo": "4","Navy": "5"};
var options10 = {"Mist": "1","Pigeon": "2","Slate": "3","Steel": "4","Dusk": "5"};
var options11 = {"White": "1","Silver": "2","Stone": "3","Smoke": "4","Jet": "5"};
var options12 = {"Thistle": "1","Lavender": "2","Heather": "3","Grape": "4","Raisin": "5"};
var options13 = {"Lilac": "1","Wysteria": "2","Amethyst": "3","Royal Purple": "4","Midnight": "5"};
var options14 = {"Dawn": "1","Orchid": "2","Heliotrope": "3","Violet": "4","Byzantine": "5"};
var options15 = {"Rose": "1","Tulip": "2","Fuchsia": "3","Cherry": "4","Cranberry": "5"};
var options16 = {"Pearl1": "1","Pearl2": "2","Pearl3": "3","Pearl4": "4","Pearl5": "5"};
var options0 = {"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 == 0){opts = options0;} if(col == 1){opts = options1;}
if(col == 2){opts = options2;} if(col == 3){opts = options3;}
if(col == 4){opts = options4;} if(col == 5){opts = options5;}
if(col == 6){opts = options6;} if(col == 7){opts = options7;}
if(col == 8){opts = options8;} if(col == 9){opts =...