JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<div class="wrapper bordered">
  <div class="milestone bordered"></div><div class="milestone bordered"></div><div class="milestone bordered"></div><div class="milestone bordered"></div><div class="milestone bordered"></div><div class="milestone bordered"></div> 
  
  <div class="indicator bordered"></div>
</div>

CSS

.wrapper {
  /* text-align: center; */
}

.milestone {
  display: inline-block;
  width: 60px;
  height: 100px;
  margin: 0 10px 0 10px;
}

.bordered {
  border: 1px solid black;
}

.indicator {
  position: relative;
  width: 20px;
  height: 20px;
  margin-left: calc((62px * 3 + 10px * 3) - 30px);
}