JSFiddle - React, Tailwind, and code Playground

by BlaXpirit

HTML

<div class="selector">

<table class="color-square" title="різні кольори"><tr><td style="background-color: #000000">black</td><td style="background-color: #777777">darkgrey</td><td style="background-color: #BBBBBB">grey</td><td style="background-color: #FFFFFF">white</td><td style="background-color: #FFEBCE">nude</td><td style="background-color: #996633">brown</td><td style="background-color: #FF0000">red</td><td style="background-color: #FF7700">orange</td><td style="background-color: #FFEE00">yellow</td><td style="background-color: #00FF00">lime</td><td style="background-color: #00AA00">green</td><td style="background-color: #00EEFF">lightblue</td><td style="background-color: #0000FF">blue</td><td style="background-color: #900090">purple</td><td style="background-color: #FF8080">pink</td></tr></table>
<table class="color-square" title="червоний, зелений, синій"><tr><td style="background-color: #FF0000">red</td><td style="background-color: #00AA00">green</td><td style="background-color: #0000FF">blue</td></tr></table>
<table class="color-square" title="чорний"><tr><td style="background-color: #000000">black</td></tr></table>
<table class="color-square" title="рожевий, червоний"><tr><td style="background-color: #FF8080">pink</td><td style="background-color: #FF0000">red</td></tr></table>
<table class="color-square" title="оранжевий"><tr><td style="background-color: #FF7700">orange</td></tr></table>

</div>

    
<a id="submit" href="#">OK</a>

CSS

.selector>* {
    border: 1px solid black;
    margin: 1px;
    cursor: pointer;
}
.selector>.selected {
    border: 1px solid white;
    border-radius: 2px;
    outline: 2px solid black;
}

.color-square {
    width: 24px;
    height: 24px;
}

table.color-square {
    table-layout: fixed;
    border-spacing: 0;
    display: inline-table;
    font-size: 0;
    color: transparent;
}

JavaScript

$('.selector').each(function(){
    $(this).children().click(function(){
        $(this).toggleClass('selected')
    })
})

$('#submit').click(function(){
    $('.color-square.selected').each(function(){
        console.log($.trim($(this).text()))
    })
})