JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li data-color="#ff0000">R</li>
    <li data-color="#00ff00">G</li>
    <li data-color="#0000ff">B</li>
</ul>

CSS

ul {
    list-style: none;
}
li:before {
    background-color: attr(data-color, color);
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
}
li:after {
    content: attr(data-color);
}