JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>最新消息示範</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>

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

    function init() {
      var SHEET_ID = '1TfNFLDOU4e_hPynUZDuk3pLXHqoRbiNXGazBN2jfspo';
      var SHEET_NAME = '工作表1';

      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(showNews);
    }

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

      for (var i = 1; i < rows; i++) {

        var id = data.getFormattedValue(i, 0);
        var title = data.getFormattedValue(i, 1);
        var date = data.getFormattedValue(i, 2);
        var content = data.getFormattedValue(i, 3);
        var link = data.getFormattedValue(i, 4);
        var img = data.getFormattedValue(i, 5);

        // 若圖片空白，自動放一張 picsum
        if (img === "") {
          img = "https://picsum.photos/seed/news" + id + "/600/400";
        }

        html += 
          '<div class="card bg-base-100 shadow-xl">' +
            '<figure>' +
              '<img src="' + img + '" alt="news image" />' +
            '</figure>' +
            '<div class="card-body">' +
              '<h2 class="card-title">' + title + '</h2>' +
              '<p class="text-sm opacity-70">' + date + '</p>' +
              '<p>' + content + '</p>' +
       ...