JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <!-- 利用Google Visualization讀取Google Sheet https://www.labnol.org/code/google-sheet-d3js-visualization-200608 -->
    <script src="https://www.gstatic.com/charts/loader.js"></script>
	
	<script>
	
    // https://developers.google.com/chart/interactive/docs/quick_start
	// Load the Visualization API and the corechart package.
    google.charts.load('current', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.	
	google.charts.setOnLoadCallback(init);

	function init() {
	  // 這個例子使用的試算表是 https://docs.google.com/spreadsheets/d/1QScI5d56Kh-LGywY4WR6EvRGPcalFQYUAdqMxbFVDvk/copy
	  // 將上述試算表另存副本後，你要在自己的雲端硬碟將該試算表設定成[知道連結的使用者都能查看]。
	  // 然後讓程式讀取 https://docs.google.com/spreadsheets/d/瀏覽器網址列上的網址擷取序號部分/gviz/tq?sheet=工作表名稱
	  // 也就是將下列的 1QScI5d56Kh-LGywY4WR6EvRGPcalFQYUAdqMxbFVDvk 更換成自己的檔案序號，以及最後部分指讀取哪個工作表。
	  var url =
		'https://docs.google.com/spreadsheets/d/1QScI5d56Kh-LGywY4WR6EvRGPcalFQYUAdqMxbFVDvk/gviz/tq?sheet=工作表1';
	  var query = new google.visualization.Query(url);
	  query.setQuery('select *');
	  query.send(processSheetsData);
	}	
	
	function processSheetsData(response) {
	  var data = response.getDataTable();
	  var columns = data.getNumberOfColumns();
	  var rows = data.getNumberOfRows();

	  var str = "";
	  for (var r=0 ; r<rows ; r++) {
		  str += data.getFormattedValue(r,0) + "(" +  data.getFormattedValue(r,1) + ")" + " 訂 " +  data.getFormattedValue(r,2) + " : " + data.getFormattedValue(r,3) + "個 <br />";
	  }
	  document.getElementById("demo").innerHTML = str;
	}
	
	</script>	
  </head>

  <body>
	<div id="demo"></div>
  </body>

</html>