JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><p>content</p></li>
    <li class="line"><span></span></li>
    <li><p>content</p></li>
    <li class="line"><span></span></li>
    <li><p>content</p></li>
    <li class="line"><span></span></li>
    <li><p>content</p></li>
</ul>

CSS

* {
    box-sizing: border-box;
}

ul {
    margin:0;
    padding:0;
    list-style:none;
    display:block;
    width:1000px;
}

li {
    display:block;
    float:left;
    width:220px;
    height:220px;
}

li.line {
    width:40px;
}

li.line span{
    display:block;
    background:#000;
    width:1px;
    height:220px;
    margin-left:auto;
    margin-right:auto;
}



p {
    display:block;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    background:#000;
    border-radius:50%;
    line-height:220px;
    text-align:center;
    color:#fff;
}