JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品列表（條件判斷）</title>
<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 bg-gray-100">

<h1 class="text-2xl font-bold mb-4">特價商品標示</h1>
<div id="productList" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"></div>

<script>
// 商品資料
var products = [
  { name: "商品 A", desc: "好吃又便宜", img: "https://picsum.photos/300/200?6", sale: false },
  { name: "商品 B", desc: "人氣熱銷中", img: "https://picsum.photos/300/200?7", sale: true },
  { name: "商品 C", desc: "限量特價",   img: "https://picsum.photos/300/200?8", sale: false }
];

// 取得容器
var container = document.getElementById("productList");

// 逐一產生卡片
for (var i = 0; i < products.length; i++) {
  var p = products[i];

  // 如果是特價商品，就多顯示紅色標籤
  var badge = "";
  if (p.sale === true) {
    badge = '<div class="badge badge-error">特價中</div>';
  }

  // 組合 HTML
  var cardHtml = ''
    + '<div class="card bg-base-100 shadow-xl relative">'
    + '  <figure><img src="' + p.img + '" alt="' + p.name + '"></figure>'
    + '  <div class="card-body">'
    + '    <h2 class="card-title">' + p.name + ' ' + badge + '</h2>'
    + '    <p>' + p.desc + '</p>'
    + '    <div class="card-actions justify-end">'
    + '      <button class="btn btn-primary">加入購物車</button>'
    + '    </div>'
    + '  </div>'
    + '</div>';

  // 加入頁面
  container.innerHTML += cardHtml;
}
</script>

</body>
</html>