JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="steps"><li></li><li></li></ul>

CSS

.steps {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.steps::before, .steps::after{
    content: "";
    position: absolute;
    top: 50%;
    display: inline-block;
    margin-top: -3px;
    width: 100%;
    border-bottom: 1px solid #ddd;
}

.steps::before{
    margin-left: -100%;
}

.steps li{
    display: inline-block;
    padding: 3px;
    background-color: #fff;
}

.steps li:before {
    content: "";
    border-radius: 50%;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #ddd;
}

.steps li:nth-child(1):before {
background-color: #888;
}

.steps li:first-child {
    padding-left: 30px;
}

.steps li:last-child {
    padding-right: 30px;
}