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;
}
.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;
}

.list_ul button{
    position:absolute;

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

    width: 100px;
    height: 30px;
}

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');                   //建立按鈕

                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_sapn.textContent = p.title;
                creat_btn.textContent = "Details";
                creat_btn.onclick = () =>{
                    alert(p.id);
                    alert(p.category);
                    alert(p.description);
                }               
            }

        }
    );
}