JSFiddle - React, Tailwind, and code Playground

HTML

<div style="text-align: center;">
    <button id="display_info" onclick="display_info()">Load Products</button>
</div>
    

<hr>

<ul class="list_ul" id="list_ul">

<!-- 內容 -->

</ul>

CSS

.list_ul{
    margin: 0;
    padding: 0;
}

.list_ul li{
    list-style-type:none;

    margin: 0 auto;

    width: 1080px;
    height: 200px;

    border: 0;
    border-bottom: 1px solid black;
}

.img_div{
    position:absolute;

    margin-top: 25px;
    margin-left: 25px;

    width: 150px;
    height: 150px;

    text-align: center;
    line-height: 150px;

    /*border: 1px solid red;*/
}
.img_div img{
    max-width: 100%;
    max-height: 100%;
}

.list_ul span{
    position:absolute;

    margin-top: 25px;
    margin-left: 200px;

    width: 855px;
    height: 30px;

    text-align: left;
    line-height: 30px;

    font-size: 30px;


    /*border: 1px solid red;*/
}

.Details_btn{
    position:absolute;

    margin-top: 145px;
    margin-left: 200px;

    width: 100px;
    height: 30px;

    /*border: 1px solid red;*/
}

.Delete_btn{
    position:absolute;

    margin-top: 145px;
    margin-left: 320px;

    width: 100px;
    height: 30px;

    /*border: 1px solid red;*/
}

JavaScript

const display_info = () => {

    fetch('https://fakestoreapi.com/products')
        .then(res => res.json())
        .then(json => {

            console.log(json);

            for (const p of json) {

                const list_ul = document.querySelector('#list_ul');                   //選取ul

                const creat_li = document.createElement('li');                        //建立li

                const creat_div = document.createElement('div');                        //建立div
                const creat_img = document.createElement('img');                        //建立img

                const creat_sapn = document.createElement('span');                    //建立span
                const creat_btn = document.createElement('button');                   //建立Details按鈕
                const creat_btn2 = document.createElement('button');                   //建立Delete按鈕

                list_ul.append(creat_li);

                creat_li.append(creat_div);
                creat_div.setAttribute('class', 'img_div');
                creat_div.append(creat_img);
                creat_img.src = p.image;

                creat_li.append(creat_sapn);
                creat_li.append(creat_btn);
                creat_li.append(creat_btn2);

                creat_sapn.textContent = p.title;

                creat_btn.setAttribute('class', 'Details_btn');
                creat_btn.textContent = "Details";
                creat_btn.onclick = () => {
                    alert(p.id);
                    alert(p.category);
                    alert(p.description);
                }

                creat_btn2.setAttribute('class', 'Delete_btn');
                creat_btn2.textContent = "Delete";
                creat_btn2.onclick = () => {
                    const target_li = event.target.closest('li');
                    fetch('https://fakestoreapi.com/products/6', {
                        method: "DELETE"
                    })
                        .then(res =>...