JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>商品列表 Demo（讀取 Google Sheet）</title>

  <!-- DaisyUI + Tailwind (CDN 版) -->
  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" />
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Google Visualization API -->
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body class="bg-base-200 p-6">

  <h1 class="text-3xl font-bold mb-6 text-center">精選商品列表</h1>

  <!-- Cards 容器 -->
  <div id="productList" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"></div>

  <script>
    google.charts.load('current', { packages: ['corechart'] });
    google.charts.setOnLoadCallback(init);

    function init() {
      // ★★★ 換成你自己的 Google Sheet ID ★★★
      var SHEET_ID = "1cB6a4F4soIDf8zOovv47nnYhJs_KESJKrInGyjJT-FQ";
      var SHEET_NAME = "工作表1"; // 或你自己的工作表名稱

      // 不用 ES6，改用最基本字串串接
      var baseUrl =
        'https://docs.google.com/spreadsheets/d/' +
        SHEET_ID +
        '/gviz/tq?sheet=' +
        encodeURIComponent(SHEET_NAME);

      var query = new google.visualization.Query(baseUrl);
      query.setQuery('select *');
      query.send(renderProducts);
    }

    function renderProducts(response) {
      var data = response.getDataTable();
      var rows = data.getNumberOfRows();
      var html = "";

      for (var r = 0; r < rows; r++) {
        var id    = data.getFormattedValue(r, 0);
        var name  = data.getFormattedValue(r, 1);
        var desc  = data.getFormattedValue(r, 2);
        var price = data.getFormattedValue(r, 3);
        var img   = data.getFormattedValue(r, 4);

        // 同樣不用 `${ }`，手動串接字串
        html +=
          '<div class="card bg-base-100 shadow-xl">' +
            '<figure>' +
              '<img src="' + img + '" alt="' + name + '" class="w-full object-cover h-48" />' +
            '</figure>' +
           ...