JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <svg class="axis" style="background-color: rgba(255, 255, 255, 0.8); border-radius: 5px;">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
            <stop offset="0%" stop-color="#ff0000"></stop>
            <stop offset="25%" stop-color="#ffff00"></stop><stop offset="50%" stop-color="#00ff00"></stop>
            <stop offset="75%" stop-color="#00ffff"></stop><stop offset="100%" stop-color="#0000ff"></stop>
        </linearGradient></defs>
        <text class="legendTitle" x="25" y="20">Legend</text>
        <rect x="25" y="30" width="250" height="25" style="fill: url(&quot;#linear-gradient&quot;);"></rect>
          <g transform="translate(15, 55)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle" style="font-size: 10px; font-weight: 700;">
          <path class="domain" stroke="currentColor" d="M10,6V0H258V6"></path>
          <g class="tick" opacity="1" transform="translate(10,0)">
            <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0.00</text><g>
          <g class="tick" opacity="1" transform="translate(258,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0.35</text></g></svg>
</div>