JSFiddle - React, Tailwind, and code Playground

by AlexJsh02

HTML

<!-- svg linearGradient-->
<svg width="500" height="100">
  <defs>
    <linearGradient id="redline" x1="0" y1="0" x2="100%" y2="0">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0"></stop>
      <stop offset="10%" stop-color="#ff0000" stop-opacity="0.9"></stop>
      <stop offset="90%" stop-color="#ff0000" stop-opacity="0.9"></stop>
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"></stop>
    </linearGradient>
  </defs>
  <text id="text1" x="0" y="25" textLength="110" lengthAdjust="spacing" style="font-family: Arial, Helvetica, sans-serif; font-size: 1.5em;">Heading</text>
  <rect x="0" y="35" width="100%" height="1" fill="url(#redline)"></rect>
  <text id="text2" x="70" y="55" font-family="Tahoma, Geneva, sans-serif" font-size="18" textLength="130" lengthAdjust="spacing" style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 1em;">Heading 2</text>
</svg>
Bottom