JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<ul>
    <li>date 1</li>
    <li>date 2</li>
    <li>date 3</li>
    <li>date 4</li>
</ul>

CSS

ul{
    width: 600px;
    margin: 25px auto;
    font-size: 0;
    text-align: center;
    position: relative;
}
ul > li{
    display: inline-block;
    vertical-align: top;
    width: 150px;
    font-size: 16px;
    position: relative;
    padding-top: 25px;
}
ul > li:before{
    content: '';
    position: absolute; top: 0; left: 50%;
    margin-left: -4px;
    z-index: 2;
    width: 8px;
    height: 8px;
    background: #ccc;
    border: 2px solid #000;
    border-radius: 50%;
}
ul > li:after{
    content: '';
    position: absolute; top: 5px; left: 0;
    width: 100%;
    height: 2px;
    background: #000;
}
ul > li:first-child:after{
    width: 50%;
    left: 50%;
}
ul > li:last-child:after{
    width: 50%;
    left: 0;
}