JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawSeriesChart);

    function drawSeriesChart() {

       
        var data = google.visualization.arrayToDataTable([
            ['id', 'x', 'y', 's'],
            ['a', 1, 2, 3],
            ['b', 3, 2, 1]
        ]);

      var options = {
        
        width: 600,
        height: 600,
        chartArea:  {
            width: 400,
            height: 400,
            },
          
           title: 'Visualization',
        hAxis: {
            title: 'System Score',
            baseline: 0,
            maxValue: 4,
            ticks: [2,4]
        },
        vAxis: {
            title: 'Financial Score',
            baseline: 0,
            maxValue: 4,
            ticks: [2,4]
        },
        
        bubble: {
            textStyle: {fontSize: 11},
            opacity: .6
                },
          
           series: {'High': {color: 'red'},
                'Medium': {color: 'yellow'},
                 'Low': {color: 'green'}                           
                },
          
        sizeAxis: {
              minValue: 3.5,
              maxValue: 25,
                  },

        backgroundColor: 'transparent',
                 
     };

      var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
      chart.draw(data, options);
    }
    </script>
      <style>
          #series_chart_div
          {
          }
          
     .chartWithOverlay {
           position: relative;

                }
    
     .overlay {
          position: absolute;
           top: 40px;   /* chartArea top  */
           left: 90px; /* chartArea left */

              }
          
     #trad, #private, #outsourced, #commercial
     {
         height:50px;
          width: 100px;
         ...