Order Status Timeline

<div class="tl">
  <div class="tl-i"><span class="tl-dot"></span><div class="tl-c"><b>Order placed</b><small>09:24 AM</small></div></div>
  <div class="tl-i"><span class="tl-dot on"></span><div class="tl-c"><b>Shipped</b><small>11:02 AM</small></div></div>
  <div class="tl-i"><span class="tl-dot on"></span><div class="tl-c"><b>Out for delivery</b><small>02:15 PM</small></div></div>
  <div class="tl-i"><span class="tl-dot"></span><div class="tl-c"><b>Delivered</b><small>Pending</small></div></div>
</div>

body{background:#f6f7fa}
.tl{font-family:system-ui,sans-serif;width:260px}
.tl-i{position:relative;padding:0 0 26px 28px;border-left:2px solid #e2e6ef}
.tl-i:last-child{border-color:transparent}
.tl-dot{position:absolute;left:-8px;top:0;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #cdd3e0}
.tl-dot.on{background:linear-gradient(135deg,#ff7a18,#ff477e);border-color:transparent}
.tl-c b{display:block;color:#1a1f36;font-size:14px}
.tl-c small{color:#8a93ad;font-size:12px}