JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="336" height="3" viewBox="0 0 336 3">
  <g id="Group_881" data-name="Group 881" transform="translate(24019 -11718)">
    <rect id="Rectangle_271" data-name="Rectangle 271" width="336" height="3" transform="translate(-24019 11718)" fill="rgba(255,255,255,0)"/>
    <path id="Path_953" data-name="Path 953" d="M333,0H0" transform="translate(-24017.5 11719.5)" fill="none" stroke="#009c9c" stroke-linecap="round" stroke-width="2" stroke-dasharray="20 20"/>
  </g>
</svg>

CSS

svg {
    -webkit-clip-path: polygon(0 0, 54% 0, 55% 100%, 0% 100%);
clip-path: polygon(0 0, 54% 0, 55% 100%, 0% 100%);
}