JSFiddle - React, Tailwind, and code Playground
HTML
<div class="param-colors">
<div class="tab-colors">
Цвет наклейки:<br />
</div>
<div class="base-color-picker">
<div class="color" id="color" onclick="change_image(this)" style="background-color: #fffff7" title="red=12&green=255&blue=86">
</div>
<div class="color" id="color" onclick="change_image(this)" style="background: #ff8e00" title="red=12&green=112&blue=86">
</div>
<div class="color" id="color" onclick="change_image()"style="background-color: #f79e00" title="123">
</div>
<div class="color" id="color" onclick="change_image()" style="background-color: #ffae00" title="123">
</div>
<div class="color" id="color" onclick="change_image()" style="background-color: #ffbe00" title="123">
</div>
<div class="color" id="color" onclick="change_image()" style="background-color: #ffd300">
</div>
<div class="color" id="color" onclick="change_image()" style="background-color: #8d0000">
</div>
<div class="color" id="color" onclick="change_image()" style="background-color: #9e0000">
</div>
<div class="color" id="color" onclick="change_image()" style="background-color: #ae0000">
</div>
...
CSS
.bg-color-picker,
.base-color-picker {
overflow: hidden;
}
.square{background-color: #fff; width: auto; height: auto;}
.bg-color-picker .bg-color-item,
.base-color-picker .base-color-item,
.param-colors .color {
width: 18px;
height: 18px;
float: left;
margin: 5px;
border: 1px solid #cccccc;
cursor: pointer;
}
.bg-color-picker .bg-color-item:hover,
.base-color-picker .base-color-item:hover,
.param-colors .color:hover {
border: 3px solid #f24b0f;
margin: 3px;
}
JavaScript
function change_image(d1) {
document.getElementById('img').src = 'http://promo-sticker.com/uploads/shop/products/main/meee.php?' + d1.title;
}