JSFiddle - React, Tailwind, and code Playground

HTML

<div>
</div>

CSS

div {
  width: 100px;
  height: 500px;
  overflow: hidden;
  outline: 1px solid red;
  display: flex;
  justify-content: center;
  align-content:center;
}

div:before {
  display: inline-flex;
  content: '';
  border-left: dashed;
  transform: scaleY(4);
  animation: height 4s;
  overflow: hidden;
}




@keyframes height {
  0% {
    height: 0px;
  }

  100% {
    height: 100%;
  }
}