JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" id="line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="20px" xml:space="preserve">
 <path class="line-delay" fill="none" stroke="black" stroke-width="1" stroke-dasharray="10,10" d="M5 10 l200 0"></path>
</svg>

CSS

.line-delay {
  stroke-dasharray: 200;
  animation: draw-svg 3s linear normal;
}

@keyframes draw-svg {
  from {
    stroke-dashoffset: 200;
  }
  to {
    stroke-dashoffset:0;
    
  }
}