JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>PIXNET API + DaisyUI Cards 左右縮圖版</title>

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

</head>
<body class="p-6">

  <h2 class="text-2xl font-bold mb-4">PIXNET 熱門文章（美容彩妝）- 左右縮圖版</h2>

  <!-- 分頁控制 -->
  <div class="flex items-center gap-3 mb-4">
    <button id="prevBtn" class="btn btn-outline">上一頁</button>
    <span id="pageInfo">目前頁碼：1</span>
    <button id="nextBtn" class="btn btn-outline">下一頁</button>
  </div>

  <!-- Cards 容器 -->
  <div id="result" class="grid grid-cols-1 gap-4"></div>

  <script>
    var resultDiv = document.getElementById("result");
    var pageInfo = document.getElementById("pageInfo");
    var prevBtn = document.getElementById("prevBtn");
    var nextBtn = document.getElementById("nextBtn");

    var currentPage = 1;

    // 載入指定頁碼
    function loadPage(page) {
      var url = "https://emma.pixnet.cc/mainpage/blog/categories/hot/23"
        + "?page=" + page
        + "&per_page=10"
        + "&api_version=2"
        + "&format=json";

      resultDiv.innerHTML = "<p class='text-gray-500'>載入中…</p>";

      fetch(url)
        .then(function(response){ return response.json(); })
        .then(function(data){
          resultDiv.innerHTML = "";

          if (!data.articles || data.articles.length === 0) {
            resultDiv.innerHTML = "<p>查無資料</p>";
            return;
          }

          for (var i = 0; i < data.articles.length; i++) {
            var item = data.articles[i];

            var imgUrl = item.thumb;
            if (!imgUrl || imgUrl === "") {
              imgUrl = "https://via.placeholder.com/120x120?text=No+Image";
            }

            var author = "(不明作者)";
            if (item.user && item.user.display_name) {
     ...