JSFiddle - React, Tailwind, and code Playground

HTML

<div id="compare--overview_chart" class="compare-chart"><svg width="976.3" height="300"><g transform="translate(20,20)"><g class="bars"><rect class="bar positive" x="9" y="21.56000000000002" width="36" height="176.43999999999997"></rect><rect class="bar positive" x="51" y="76.78" width="36" height="121.22"></rect><rect class="bar positive" x="93" y="96.80000000000001" width="36" height="101.19999999999999"></rect><rect class="bar positive" x="135" y="121.65999999999998" width="36" height="76.34000000000002"></rect><rect class="bar positive" x="177" y="139.04" width="36" height="58.96000000000001"></rect><rect class="bar positive" x="219" y="151.58" width="36" height="46.41999999999999"></rect><rect class="bar positive" x="261" y="152.02" width="36" height="45.97999999999999"></rect><rect class="bar positive" x="303" y="155.54000000000002" width="36" height="42.45999999999998"></rect><rect class="bar positive" x="345" y="163.9" width="36" height="34.099999999999994"></rect><rect class="bar positive" x="387" y="177.98" width="36" height="20.02000000000001"></rect><rect class="bar positive" x="429" y="182.16000000000003" width="36" height="15.839999999999975"></rect><rect class="bar positive" x="471" y="186.56" width="36" height="11.439999999999998"></rect><rect class="bar positive" x="513" y="186.56" width="36" height="11.439999999999998"></rect><rect class="bar positive" x="555" y="187.88" width="36" height="10.120000000000005"></rect><rect class="bar positive" x="597" y="189.42" width="36" height="8.580000000000013"></rect><rect class="bar positive" x="639" y="192.5" width="36" height="5.5"></rect><rect class="bar positive" x="681" y="196.02" width="36" height="1.9799999999999898"></rect><rect class="bar positive" x="723" y="198" width="36" height="0"></rect><rect class="bar positive" x="765" y="198" width="36" height="0"></rect><rect class="bar positive" x="807" y="198" width="36" height="0"></rect><rect class="bar positive" x="849" y="198" width="36"...

CSS

#compare--overview_chart {
  padding: 0; }
  #compare--overview_chart .chart rect {
    fill: #D0DBCB; }
  #compare--overview_chart .bar.positive {
    fill: #D0DBCB; }
  #compare--overview_chart .bar.negative {
    fill: #DFD8CE; }
  #compare--overview_chart .axis path, #compare--overview_chart .axis line {
    fill: none;
    stroke: #DFD8CE;
    shape-rendering: crispEdges; }
  #compare--overview_chart .company--name {
    transform: rotate(-45deg);
    font-size: 10px; }
    @media only screen and (min-width: 544px) {
      #compare--overview_chart .company--name {
        transform: rotate(-45deg) !important;
        font-size: 10px !important; } }
    @media only screen and (min-width: 768px) {
      #compare--overview_chart .company--name {
        transform: rotate(-45deg) !important;
        font-size: inherit !important; } }
    @media only screen and (min-width: 992px) {
      #compare--overview_chart .company--name {
        transform: rotate(-45deg) !important;
        font-size: inherit !important; } }
    @media only screen and (min-width: 1200px) {
      #compare--overview_chart .company--name {
        transform: rotate(-45deg) !important;
        font-size: inherit !important; } }
  #compare--overview_chart .company--name:hover {
    cursor: pointer;
    text-decoration: underline; }
  #compare--overview_chart .legend {
    border-radius: 2px;
    color: #FFFFFF;
    font-weight: bold;
    display: none !important; }
    @media only screen and (min-width: 544px) {
      #compare--overview_chart .legend {
        display: none !important; } }
    @media only screen and (min-width: 768px) {
      #compare--overview_chart .legend {
        display: none !important; } }
    @media only screen and (min-width: 992px) {
      #compare--overview_chart .legend {
        display: block !important; } }
    @media only screen and (min-width: 1200px) {
      #compare--overview_chart .legend {
        display: block !important; } }
  #compare--overview_chart...