JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="top-five-charts">
  <div class="chart-wrapper">
    <div id="chart1" class="insight-pie"></div>
  </div>
  <div class="chart-wrapper">
    <div id="chart2" class="insight-pie"></div>
  </div>
  <div class="chart-wrapper">
    <div id="chart3" class="insight-pie"></div>
  </div>
</div>

CSS

.chart-wrapper {
  float: left;
  width: 33%;
}

.top-five-charts {
  width: 100%;
  display: block;
}

JavaScript

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 5],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  var options = {
    pieSliceText: 'value',
    pieHole: '0.5',

    legend: {
      position: 'labeled',
      labeledValueText: 'both',
      textStyle: {
        color: 'blue',
        fontSize: 10
      }
    },
  };

  var chart1 = new google.visualization.PieChart(document.getElementById('chart1'));
  var chart2 = new google.visualization.PieChart(document.getElementById('chart2'));
  var chart3 = new google.visualization.PieChart(document.getElementById('chart3'));
  options.chartArea = {left: '10%', width: '100%', height: '65%'};
  options.title = 'industries For USA';
  chart1.draw(data, options);
  options.title = 'Categories For USA';
  chart2.draw(data, options);
  options.title = 'Categories For Construction';
  chart3.draw(data, options);
}