JSFiddle - React, Tailwind, and code Playground

HTML

<button id="load">Load Products</button>
<hr>
<ul class="product-list"></ul>

<div id="modal">
  <div class="modal-content">
    <h3 data-title=""></h3>
    <hr>
    <ul>
      <img src="" alt="">
      <li>分類</li>
      <li>描述</li>
      <li>價格</li>
    </ul>
    <button id="close-modal" onclick="closeModal()">關閉</button>
  </div>
</div>

CSS

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#load{
  padding: .5rem 1rem;
  margin: .5rem;
  border-radius: .5rem;
  border: none;
  cursor: pointer;
  background-color: #0080FF;
  color: #fff;
  &:hover{
    transform: scale(1.1);
  }
}
.product-list{
  padding: 1rem 0;
  width: 90%;
  margin: auto;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  height: 98vh;
  & li{
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    & img{
      width: 50%;
      margin: auto;
      height: 50%;    
    }
    & span{
      font-weight: 600;
      text-align: center;
    }
    .btn-box{
      display: flex;
      justify-content: center;
      padding: .5rem 0;
      & button{
        border: none;
        border-radius: .5rem;
        padding: .5rem 1rem;
        color: #fff;
        cursor: pointer;
        &:hover{
          transform: scale(1.1);
        }
      }
      .details-btn{
        background-color: #060;
        margin-right: 1rem;
      }
      .delete-btn{
        background-color: #f00;
      }    
    }

  }
}
body{
  position: relative;
}
#modal{
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  display: none;   
}
.modal-content{
  background-color: aliceblue;
  position: absolute;
  width: 80%;
  height: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  display: none;
  flex-direction: column;
  border-radius: 1rem;
  box-shadow: 2px 2px 8px 1px ;
  & h3{
    text-align: center;
    padding: .5rem ;
    background-color: #0080FF;
    color: #fff;
    border-top-right-radius: .5rem;
    border-top-left-radius: .5rem;
  }
  & ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem 0;
    & li{
      margin: .5rem 0;
      text-align: center;
      padding: 0 .5rem;
    }
    & img{
      width: 20%;
 ...

JavaScript

const loadBtn=document.querySelector("#load");
const modal=document.querySelector("#modal");
const modalContent=document.querySelector(".modal-content");

loadBtn.onclick=()=>{
  fetch('https://fakestoreapi.com/products')
    .then(function(res){
    return res.json();
  }).then(function(data){         
    for(const products of data){
      const ul=document.querySelector("ul");
      const li=document.createElement("li");
      const span=document.createElement("span");
      const img=document.createElement("img");
      const detailsBtn=document.createElement("button");
      const delBtn=document.createElement("button");
      const btnBox=document.createElement("div");
      let title=document.querySelector(".modal-content h3");
      let category=document.querySelectorAll(".modal-content ul li")[0];
      let description=document.querySelectorAll(".modal-content ul li")[1];
      let price=document.querySelectorAll(".modal-content ul li")[2];
      let image=document.querySelector(".modal-content ul img");
      console.log(products);       
      ul.append(li);
      li.append(img);
      li.append(span);
      li.append(btnBox);
      btnBox.append(detailsBtn);
      btnBox.append(delBtn);
      img.src=products.image;
      span.textContent=products.title;
      btnBox.className="btn-box";
      detailsBtn.textContent="Details";
      detailsBtn.className="details-btn";
      delBtn.textContent="Delete";
      delBtn.className="delete-btn";
      li.dataset.title=products.title;
      li.dataset.category=products.category;
      li.dataset.description=products.description;
      li.dataset.price=products.price;
      detailsBtn.onclick=()=>{
        modal.style.display="block";
        modalContent.style.display="flex";
        title.textContent=li.dataset.title;
        category.textContent=li.dataset.category;
        description.textContent=li.dataset.description;
        price.textContent=" $ "+li.dataset.price;
        image.src=products.image;
   ...