JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="black">
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul id="white">
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

body {
    margin:20px;
    background:#ccc;
}
ul {
    list-style:none;
    width: 200px;
    height:200px;
    padding:20px;
}
ul#black {
    background:#000;
}
ul#white {
    background:#fff;
}
li {
    float:left;
    width:20px;
    height:20px;
    background:#444;
    margin-right:10px;
    border-radius:20px;
    border:3px solid #eee;
}