JSFiddle - React, Tailwind, and code Playground

by Taras Pyatyhorskyy

HTML

<body>
  <div class="wrapper">
    <div class="line-right">
      <div class="line-top"></div>
      <div class="line-bottom"></div>
    </div>
    </div>
</body>

CSS

.line-right {
 position: relative;
 transform: rotate(90deg);
 margin-left: 100px;
 width: 2px;
 height: 80px;
 background-color: black;
 }
.line-top {
 position: absolute;
 left: 0px;
 width: 2px;
 height: 80px;
 background-color: blue;
}
.line-top {
 position: absolute;
 left: 0px;
 width: 2px;
 height: 1px;
 background-color: green;
  animation: anim 4s infinite;
}
@keyframes anim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-90deg)
  }
}