JSFiddle - React, Tailwind, and code Playground

HTML

<div class="responsive-circle"><i></i></div>

CSS

.responsive-circle {
    height: 2px;
    background-color: #CCC;
    overflow: visible;
    position: relative;
}

.responsive-circle:before,
.responsive-circle:after,
.responsive-circle > i {
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border:1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle:after {
    right: 0;
}

.responsive-circle > i {
    left: 50%;
    left: calc(50% - 9px);
}