JSFiddle - React, Tailwind, and code Playground

by Bulent Akgul

HTML

<div id="selectColor" class="flDirColumn">
	<div class="optionWrapper flex flexWrap">
		<button class="column16 colors flex">
			<div id="s01c1" class="colorBox"></div>
			<div id="s01c2" class="colorBox"></div>
			<div id="s01c3" class="colorBox"></div>
			<div id="s01c4" class="colorBox"></div>
			<div id="s01c5" class="colorBox"></div>
		</button>
		<button class="column16 colors flex">
			<div id="s02c1" class="colorBox"></div>
			<div id="s02c2" class="colorBox"></div>
			<div id="s02c3" class="colorBox"></div>
			<div id="s02c4" class="colorBox"></div>
			<div id="s02c5" class="colorBox"></div>
		</button>
		<button class="column16 colors flex">
			<div id="s03c1" class="colorBox"></div>
			<div id="s03c2" class="colorBox"></div>
			<div id="s03c3" class="colorBox"></div>
			<div id="s03c4" class="colorBox"></div>
			<div id="s03c5" class="colorBox"></div>
		</button>
		<button class="column16 colors flex">
			<div id="s04c1" class="colorBox"></div>
			<div id="s04c2" class="colorBox"></div>
			<div id="s04c3" class="colorBox"></div>
			<div id="s04c4" class="colorBox"></div>
			<div id="s04c5" class="colorBox"></div>
		</button>
		<button class="column16 colors flex">
			<div id="s05c1" class="colorBox"></div>
			<div id="s05c2" class="colorBox"></div>
			<div id="s05c3" class="colorBox"></div>
			<div id="s05c4" class="colorBox"></div>
			<div id="s05c5" class="colorBox"></div>
		</button>
	</div>

	<div class="optionWrapper flDirColumn">
		<div class="column48"><h4>Color Assignment</h4></div>
		<div class="row flexAlignItemsCenter">
			<div class="column08">Primary:</div>
			<div class="column12">
				<select name="" id="colorList1" class="list">
					<option class="" value="">Choose Color</option>
					<option class="" value=""></option>
					<option class="" value=""></option>
					<option class="" value=""></option>
					<option class="" value=""></option>
					<option class="" value=""></option>
				</select>
			</div>
			<div...

CSS

.flex {
  display: flex;
  display: -webkit-flex;
}

.flexWrap {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexAlignItemsCenter {
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  align-items: center;
}

.column08 {
  width: 8vw;
  padding: 0 0.5vw;
}

.column12 {
  width: 12vw;
  padding: 0 0.5vw;
}

.column48 {
  width: 48vw;
  padding: 0 0.5vw;
}

.list, .box {
  width: 100%;
  height: 3vw;
  border: 1px solid #D8D8D8;
  -webkit-border-radius: 0.5vw;
  border-radius: 0.5vw;
}

.colorBox {
  width: 3vw;
  height: 3vw;
  margin: 0;
  padding: 0;
}

#s01c1, .s01c1 { background-color: #698B71; }
#s01c2, .s01c2 { background-color: #F49D8C; }
#s01c3, .s01c3 { background-color: #D7CA83; }
#s01c4, .s01c4 { background-color: #D9A475; }
#s01c5, .s01c5 { background-color: #725054; }
#s02c1, .s02c1 { background-color: #4D0942; }
#s02c2, .s02c2 { background-color: #891141; }
#s02c3, .s02c3 { background-color: #F17573; }
#s02c4, .s02c4 { background-color: #F3A382; }
#s02c5, .s02c5 { background-color: #F3CB9A; }
#s03c1, .s03c1 { background-color: #22618C; }
#s03c2, .s03c2 { background-color: #1A9BD4; }
#s03c3, .s03c3 { background-color: #24A2D4; }
#s03c4, .s03c4 { background-color: #8CCEDC; }
#s03c5, .s03c5 { background-color: #F3F5F4; }
#s04c1, .s04c1 { background-color: #ED0977; }
#s04c2, .s04c2 { background-color: #EFEFEF; }
#s04c3, .s04c3 { background-color: #FFFFFF; }
#s04c4, .s04c4 { background-color: #02B5C7; }
#s04c5, .s04c5 { background-color: #555555; }
#s05c1, .s05c1 { background-color: #091928; }
#s05c2, .s05c2 { background-color: #3E828F; }
#s05c3, .s05c3 { background-color: #79ACA5; }
#s05c4, .s05c4 { background-color: #D7DDD1; }
#s05c5, .s05c5 { background-color: #F5EED2; }

JavaScript

$(".colors").bind("click", function(){
    var color1 = $(this).find(":nth-child(1)").prop("id");
    var color2 = $(this).find(":nth-child(2)").prop("id");
    var color3 = $(this).find(":nth-child(3)").prop("id");
    var color4 = $(this).find(":nth-child(4)").prop("id");
    var color5 = $(this).find(":nth-child(5)").prop("id");
    var color1hex = $(this).find(":nth-child(1)").css("background-color");
    var color2hex = $(this).find(":nth-child(2)").css("background-color");
    var color3hex = $(this).find(":nth-child(3)").css("background-color");
    var color4hex = $(this).find(":nth-child(4)").css("background-color");
    var color5hex = $(this).find(":nth-child(5)").css("background-color");
    
    $(".list >:nth-child(2)").removeClass().addClass(color1).empty().append(color1hex);
    $(".list >:nth-child(3)").removeClass().addClass(color2).empty().append(color2hex);
    $(".list >:nth-child(4)").removeClass().addClass(color3).empty().append(color3hex);
    $(".list >:nth-child(5)").removeClass().addClass(color4).empty().append(color4hex);
    $(".list >:nth-child(6)").removeClass().addClass(color5).empty().append(color5hex);
})

$("#colorList1").change(function (){
    var bgColorOne;
    $("select option:selected").each(function (){
        bgColorOne = $(this).css("background-color");
    })
    $("#selectedColor1").css("background-color", bgColorOne);
})

$("#colorList2").change(function (){
    var bgColorTwo;
    $("select option:selected").each(function (){
        bgColorTwo = $(this).css("background-color");
    })
    $("#selectedColor2").css("background-color", bgColorTwo);
})