JSFiddle - React, Tailwind, and code Playground

by Don Johnson

HTML

<ul>
    <li class="red">
        <input type="checkbox" name="color[]" value="Brick_Red"> <span>Brick Red</span>
    </li>
    <li class="blue">
        <span></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;
}
.red .colorBox {
    background:#C11B17;
}
.blue .colorBox {
    background:#00F;
}
}

JavaScript

$(function () { 
    $("span").prepend('<div class="colorBox"></div>');   
});