JSFiddle - React, Tailwind, and code Playground

by Tamil Selvan

HTML

<ul>
    <li><a href="#" class="swatchButton" data-color="blk"><span></span>Black</a>
    </li>
    <li><a href="#" class="swatchButton" data-color="red"><span></span>Red</a>
    </li>
    <li><a href="#" class="swatchButton" data-color="blu"><span></span>Blue</a>
    </li>
    <li><a href="#" class="swatchButton" data-color="grn"><span></span>Green</a>
    </li>
    <li><a href="#" class="swatchButton" data-color="yel"><span></span>Yellow</a>
    </li>
</ul>

CSS

span {
    display:inline-block;
    width:1em;
    height:1em;
}
.blk {
    background:black;
}
.red {
    background:red;
}
.blu {
    background:blue;
}
.grn {
    background:green;
}
.yel {
    background:yellow;
}

JavaScript

$(document).ready(function () {
    $(".swatchButton").each(function () {
        var color = $(this).data('color');
        $(this).find('span').addClass(color);
    });

});