JSFiddle - React, Tailwind, and code Playground

by Nate

HTML

<div id="graphic">
  <svg viewBox="0 0 100 10">
    <line x1="0" y1="5.5" x2="100" y2="5.5" class="timeline-line" />
    <rect x="0.25" y="3" width="5" height="5" class="timeline-rect" ></rect>
    <rect x="10.25" y="3" width="5" height="5" class="timeline-rect" ></rect>
    <rect x="50.25" y="3" width="5" height="5" class="timeline-rect" ></rect>
    <rect x="75.25" y="3" width="5" height="5" class="timeline-rect" ></rect>
    <rect x="99.25" y="3" width="5" height="5" class="timeline-rect" ></rect>
  </svg>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

#graphic {
  /* padding: 0 2vw; */
  height: 100%;
  display: flex;
  width: 100%;
}

svg {
  display: block;
  /* overflow: visible; */
  /* overflow: visible; */
}

.timeline-line {
  stroke: black;
  stroke-width: 1;
}

.timeline-rect {
  fill-opacity: 0;
  stroke-width: 0.5;
  stroke: black;
}