JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<div id="wrapper" class="bordered centered">
  <div>


    <div class="milestone bordered middle"></div>
    <div class="milestone bordered middle"></div>
    <div class="milestone bordered middle"></div>
    <div class="milestone bordered middle"></div>
    <div class="milestone bordered middle"></div>
    <div class="milestone bordered middle"></div>
  </div>
  <div class="timeline">
    <div class="bordered indicator"></div>

    <div class="line">

    </div>
  </div>
  <div>
    <div class="milestone bordered middle"></div>
    <div class="milestone bordered middle"></div>
    <div class="milestone bordered middle"></div>
    <div class="milestone bordered middle"></div>
    <div class="milestone bordered middle"></div>
    <div class="milestone bordered middle"></div>
  </div>
</div>

CSS

#wrapper {
  width: 1000px;
  /* height: 200px; */
}

.bordered {
  border: 1px solid black;
}

.centered {
  text-align: center;
}

.milestone {
  height: 70px;
  width: 25px;
}

.middle {
  display: inline-block;
  position: relative;
  margin: 0 0 0 0;
  top: calc(50% - 35px);
}

.indicator {
  position: absolute;
  width: 20px;
  height: 40px;
  background-color: black;
  top: calc(50% - 35px);
}

.timeline {
  height: 60px;
  /*   background-color: black; */
}

.line {
  position: relative;
  height: 2px;
  background-color: black;
  top: calc(50% - 1px);
}

JavaScript

var arrDates = [
  "2019-01-01",
  "2019-02-02",
  "2019-03-03",
  "2019-04-04",
  "2019-05-05",
  "2019-06-06",
];