JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<svg width="1000" height="400">
  <defs>
    <linearGradient id="fadeGrad" y2="1" x2="0">
      <stop offset="0.5" stop-color="white" stop-opacity=".8" />
      <stop offset="1" stop-color="white" stop-opacity="0.2" />
    </linearGradient>
  </defs>
  <rect class="data" x="0" y="200" height="200" width="10" />
  <rect class="data" x="20" y="100" height="300" width="10" />
  <rect class="data" x="40" y="200" height="200" width="10" />
  <rect class="data" x="60" y="250" height="150" width="10" />
  <rect class="data" x="80" y="-100" height="500" width="10" />
  <rect x="0" width="1000" height="30" y="0" fill="url(#fadeGrad)" stroke="red"></rect>
</svg>

CSS

.data {
  fill: steelblue;
}