JSFiddle - React, Tailwind, and code Playground

by Shrikrishna Gupta

HTML

<ul class="legend">
    <li><span class="superawesome"></span> Super Awesome</li>
    <li><span class="awesome"></span> Awesome</li>
    <li><span class="kindaawesome"></span> Kinda Awesome</li>
    <li><span class="notawesome"></span> Not Awesome</li>
</ul>

CSS

/* basic positioning */
.legend { list-style:bullet; }
.legend li { float: left; margin-right: 10px; }
.legend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; }
/* your colors */
.legend .superawesome { background-color: #ff00ff; }
.legend .awesome { background-color: #00ffff; }
.legend .kindaawesome { background-color: #0000ff; }
.legend .notawesome { background-color: #000000; }