JSFiddle - React, Tailwind, and code Playground

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

var swatchColor = $(".swatchButton").data('color');
    $(".swatchButton").find('span').addClass(swatchColor);