JSFiddle - React, Tailwind, and code Playground

by chayacooper

HTML

<ul>
    <li data-background="#C11B17">
        <input type="checkbox" name="color[]" value="Brick_Red"> <span>Brick Red</span>
    </li>
</ul>

CSS

li {
    list-style:none;    
}
.colorBox {
    border: 1px solid silver;
    vertical-align:baseline;
    margin-right:4px;
    margin-left:6px;
    width: 1.65em;
    height:1.65em;
    font-size:8px;
    float:left;
}

JavaScript

$(function () {      
    var color = $('li').attr('data-background');
    $("span").prepend('<div class="colorBox" style="background:' + color + '"></div>');   
});