JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Version 2：Google Maps 導航按鈕 + DaisyUI</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>

  <style>
    .building-card { display:flex; flex-direction:column; }
    @media (min-width: 640px) {
      .building-card { flex-direction: row; }
    }
  </style>
</head>

<body class="p-4 bg-base-200">
  <h2 class="text-2xl font-bold mb-4">中興大學校園導覽（DaisyUI）</h2>

  <div id="list" class="space-y-4"></div>

  <script>
    var SHEET_URL = 
      "https://docs.google.com/spreadsheets/d/1c8csSLxxQwEruOCT1TxyxgBk5v72tTMErvUEYoSGf2s/pub?output=csv";

    function loadData() {
      fetch(SHEET_URL)
        .then(function(res) { return res.text(); })
        .then(function(text) {

          var rows = text.split("\n");
          var list = document.getElementById("list");

          for (var i = 1; i < rows.length; i++) {
            var cols = rows[i].split(",");
            var name = cols[1];
            var lat = cols[2];
            var lng = cols[3];

            if (!name) continue;

            var navUrl = "https://maps.google.com.tw/maps?daddr=" + lat + "," + lng;

            // 組合 HTML（不能用 `$` → 改傳統字串加法）
            var card =
              "<div class='card bg-base-100 shadow-xl building-card'>" +
                "<div class='card-body'>" +
                  "<h2 class='card-title'>" + name + "</h2>" +
                  "<p>座標：" + lat + ", " + lng + "</p>" +
                  "<a href='" + navUrl + "' target='_blank' " +
                     "class='btn btn-primary btn-sm w-fit'>" +
                    "導航到此" +
                  "</a>" +
                "</div>" +
              "</div>";

            list.innerHTML += card;
          }
        });
    }

    loadData();
 ...