JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<div class="color_picker_body">
<div class="color_picker close">
    <table style="border-spacing: 0px;">
        <tr>
        <td><div id="start_color" title="Бежевый"></div></td>
            <td id="ya_pointer_colorbox_open"><img id="ya_pointer_detail-icon" src="http://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_down-20.png" title="Свернуть/Развернуть" alt="" /></td>
        </tr>
    </table>
</div>
<div class="ya_pointer_colorbox" style="display: none;">
<table cellpadding="0" cellspacing="5">
    <tr>
        <td><div id="ya_pointer_color_1" title="Бежевый"></div></td>
        <td><div id="ya_pointer_color_2" title="Желтый"></div></td>
        <td><div id="ya_pointer_color_3" title="Коричневый"></div></td>
        <td><div id="ya_pointer_color_4" title="Пурпурный"></div></td>
        <td><div id="ya_pointer_color_5" title="Синий"></div></td>
    </tr>
    <tr>
        <td><div id="ya_pointer_color_6" class="silv" title="Бежевый металлик"></div></td>
        <td><div id="ya_pointer_color_7" class="silv" title="Желтый металлик"></div></td>
        <td><div id="ya_pointer_color_8" class="met" title="Коричневый металлик"></div></td>
        <td><div id="ya_pointer_color_9" class="met" title="Пурпурный металлик"></div></td>
        <td><div id="ya_pointer_color_10" class="met" title="Синий металлик"></div></td>
    </tr>
    <tr>
        <td><div id="ya_pointer_color_11" title="Белый"></div></td>
        <td><div id="ya_pointer_color_12" title="Зеленый"></div></td>
        <td><div id="ya_pointer_color_13" title="Красный"></div></td>
        <td><div id="ya_pointer_color_14" title="Розовый"></div></td>
        <td><div id="ya_pointer_color_15" title="Фиолетовый"></div></td>
    </tr>
    <tr>
        <td><div id="ya_pointer_color_16" class="silv" title="Белый металлик"></div></td>
        <td><div id="ya_pointer_color_17" class="met" title="Зеленый металлик"></div></td>
        <td><div id="ya_pointer_color_18" class="met" title="Красный...

CSS

.color_picker {
    color: #ECE8B7;
    padding: 2px;
    background: #FFF;
    margin: 2px;
    border: 1px solid #D7D7D7;
    width: 70px;
    height: 22px;
    position: relative;
}
#start_color {
    border: 1px solid #A7A7A7;
    width: 50px;
    height: 18px;
    background-color: #ECE8B7;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;   
}
.color_picker.close {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.color_picker.open {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom:0px;
    z-index:1;
}
#ya_pointer_detail-icon {
    width: 16px;
    opacity: 0.6;
    position: relative;
    top: 3px;
    left: 1px;
    cursor:pointer;
}
.ya_pointer_colorbox {
    width:400px;
    height:215px;
    -webkit-border-radius: 5px;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius: 5px;
    -moz-border-radius-topleft: 0;
    border-radius: 5px;
    border-top-left-radius: 0;
    border: 1px solid #CACACA;
    position: relative;
    left: 2px;
    top: -3px;
    cursor:pointer;
}
.ya_pointer_colorbox div {
    border: 1px solid #A7A7A7;
    width: 72px;
    height: 28px;
    background-color: #ECE8B7;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.ya_pointer_colorbox .select {  
    border: 1px solid #19C456;  
}
.ya_pointer_colorbox .select img {
    position: relative;
    left: 26px;
    top: 3px;
}
.met {
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.01) 99%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(50%,rgba(255,255,255,0.35)), color-stop(99%,rgba(255,255,255,0.01)),...

JavaScript

$('.ya_pointer_colorbox').hide(1);
$('#ya_pointer_colorbox_open').click(function () {
    $('.ya_pointer_colorbox').toggle("blind",500);                                  
    if ($('.color_picker').attr("class") == "color_picker close") {
        $('.color_picker').removeClass('close');
        $('.color_picker').addClass('open');
    }
    else if ($('.color_picker').attr("class") == "color_picker open") {
        setTimeout(function(){
            $('.color_picker').removeClass('open');
            $('.color_picker').addClass('close');
        },450);
    };
});
$('.ya_pointer_colorbox').on('click', 'div', function(){
    var el = this;
    var bcolor = $(el).css('background-color');
    var el_title = $(el).attr("title");
    var el_class = $(el).attr("class");
    $('.select').html('');
    $('.select').removeClass('select');
    $(el).addClass('select');
    $(el).html('<img src="http://cdn1.iconfinder.com/data/icons/CrystalClear/22x22/actions/button_ok.png" alt="" />');
    $('#start_color').css('background-color', bcolor);
    $('#start_color').attr("title",el_title);
    $('#start_color').attr("class",el_class);
});