JSFiddle - React, Tailwind, and code Playground

by Anderson Carlos Woss

HTML

<div class="link"></div>

CSS

.link {
  width: 2px;
  height: 20px;
  background-color: #CCC;
  position: relative;
}

.link::before, .link::after {
  content: " ";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #CCC;
}

.link::before {
  top: 0;
  left: -2px;
}

.link::after {
  bottom: 0;
  left: -2px;
}