JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table pallete">
    <div class="row">
        <div class="cell one col"></div>
        <div class="cell two col"></div>
        <div class="cell three col"></div>
    </div>
</div>
<div class="pick"></div>

CSS

.table {
    display:table;
    table-layout:fixed;
    height:30px;
    width:90px;
    position:absolute;
}
.pick {
    background-color:white;
    border:1px solid #F2F2F2;
    height:30px;
    width:30px;
    cursor:pointer;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    height:100%;
}
.one {
    background-color:green;
}
.two {
    background-color:red;
}
.three {
    background-color:yellow;
}

JavaScript

$('.pallete').hide();
$(document).delegate('.pick', 'click', function () {
    var pos = $(this).offset();
    var x = pos.left - $(window).scrollLeft() + $(this).width();
    var y = pos.top - $(window).scrollTop() + $(this).height();
    $('.pallete').css({
        top: y + "px",
        left: x + "px",
    }).show();
});

$(document).delegate('.col', 'click', function () {
    var pos = $(this).css('background-color');
    $('.pick').css('background-color', pos);
    $(this).parents('div').fadeOut();
});