JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div></div>
</section>

CSS

body{background-color: darkslateblue;}
section{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 100px;
  background-color: white;
}
div{
  position: absolute;
  width: 11px;
  height: 11px;
  bottom: 0;
  border-radius: 50%;
  border: 1px solid white;
  margin-left: -5px;
  box-sizing: border-box;
  background-color: darkslateblue;
  animation: move 2s infinite;
  
}

@keyframes move{
  to{
    transform: translateY(-95px)
  }
}