JSFiddle - React, Tailwind, and code Playground

by David Sch

HTML

<div class="x_stylist_info_timeline">
    <ol>
          <li></li>
      <li>abc</li>  
      <li>abc</li>
        <li>abc</li>
         <li>abc</li>
      <li></li>


</ol>
</div>

CSS

.x_stylist_info_timeline {
  overflow-x: hidden;
  padding: 20px 0;
}

.x_stylist_info_timeline ol {
  width: 100%;
  transition: all 1s;
  margin:0;
  padding:0;
  display:flex;
  justify-content: space-between;
}

.x_stylist_info_timeline ol li {
  list-style:none;
  position: relative;
  text-align:center;
  flex-grow: 1;
  flex-basis: 0;
  padding: 0 5px;
}

.x_stylist_info_timeline ol li:first-child::before,
.x_stylist_info_timeline ol li:last-child::before
 {
width: 30px;
height: 30px;
border: 2px solid #ccc;
background: white;
box-shadow: 10px white;
    filter        : drop-shadow(0px 0px 10px grey);
margin-top: -11px;
}

.x_stylist_info_timeline ol li:before {
  content:"";
  width:10px;
  height:10px;
  display:block;
  border-radius:50%;
  background: #ccc;
  margin:0 auto 5px auto;
}

.x_stylist_info_timeline ol li:not(:last-child)::after {
    content: "";
    width: calc(100% - 14px);
    height: 2px;
    display: block;
    background: #ccc;
    margin: 0;
    position: absolute;
    top: 4px;
    left: calc(50% + 7px);
}