JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="colorPrev"></div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

.row div {width: 25px; height: 25px; display: inline-block; border: 1px solid #999; border-radius: 5px; cursor: pointer;}
.row {float: left; clear: left;}
.colorPrev {float: right; height: 120px; border: 1px solid #999; border-radius: 5px; margin-right: 530px; width: 120px;}

JavaScript

function getWebsafeColours() {
        var colours = [];
        var hex;
        var parts = ["00", "33", "99", "66", "ff", "cc"];
        for (var i=0; i < 16; i++) {
            colours.push("#" + 
                         parts[Math.floor(i/36)] + 
                         parts[Math.floor((i/6)%6)] + 
                         parts[i % 6]);
        }
        return colours;
}

$(document).ready(function(){
    var colours = getWebsafeColours();
    var i = 0;
    $(".row > div").each(function(){
        $(this).css("background", colours[i])
               .click(function(){
                   $(".colorPrev").css("background", $(this).css("background"));
               });
        i++;
    });
});