JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 196 6">
  <defs>
    <clipPath id="line">
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M0 5C0 4.65482 0.279822 4.375 0.625 4.375H5C8 4 9.11049 0.375 10 0.375C11 0.375 12 4 15 4.375H195.375C195.72 4.375 196 4.65482 196 5V5C196 5.34518 195.72 5.625 195.375 5.625H15C12 5.5 10 1.8 10 1.8C10 1.8 8 5.5 5 5.625H0.625C0.279822 5.625 0 5.34518 0 5V5Z"
        fill="black"
      />
    </clipPath>
    <radialGradient id="gradient">
      <stop offset="0%" stop-color="red" stop-opacity="1" />
      <stop offset="90%" stop-color="red" stop-opacity="0" />
    </radialGradient>
  </defs>
  <g clip-path="url(#line)">
    <rect width="100%" height="100%" fill="#ccc" />
    <rect x="-30" y="-36" width="80" height="80" fill="url('#gradient')"} />
  </g>
</svg>

CSS

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

svg {
  width: 196px;
  height: 6px;
  display: block;
}