JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="horizontal">
    <li></li>
    <li></li>
    <li></li>
</ul>
<div class="clear"></div>
<ul class="vertical">
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul {
    list-style: none;
}
ul li{
    margin: 10px;
    width: 13px;
    height: 13px;
    background: #333333;
    border-radius: 50%;
    border:1px solid #fff;
}

.horizontal li{
    float: left;

}

.clear{
    clear: both;
}