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

.span_title{
    position:absolute;

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

    width: 855px;
    height: 30px;

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

    font-size: 30px;
}

.Details_btn{
    position:absolute;

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

    width: 100px;
    height: 30px;
}

.Delete_btn{
    position:absolute;

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

    width: 100px;
    height: 30px;
}


.modal{
    display: none;/**/

    position:fixed;
    z-index: 10;

    left: 0;
    top: 0;

    width: 100%; /* Full width */
    height: 100%; /* Full height */

    /*overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.p_modal{

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    

    width: 1080px;
    height: 300px;

    border-radius: 10px;

    background-color: rgba(255, 255, 255);
}

.img_modal{
    position:absolute;

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

    width: 250px;
    height: 250px;

    text-align: center;
    line-height: 150px;
}
.img_modal img{
    max-width: 100%;
    max-height: 100%;
}

.title_modal{
    position:absolute;

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

    width: 755px;
    height: 30px;

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

    font-size: 30px;

    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.category_modal{
    position:absolute;

    margin-top: 55px;
    margin-left: 300px;

    width: 755px;
    height: 20px;

  ...

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按鈕

                const creat_modal = document.createElement('div');                    //建立madal遮罩
                const creat_modal_div = document.createElement('div');
                const creat_modal_img_div = document.createElement('div');
                const creat_modal_img = document.createElement('img');
                const creat_modal_title = document.createElement('div');
                const creat_modal_category = document.createElement('div');
                const creat_modal_description = document.createElement('div');
                const creat_modal_price = document.createElement('div');




                creat_li.dataset.title = p.title;                                     //data attribute
                creat_li.dataset.category = p.category;
                creat_li.dataset.description = p.description;
                creat_li.dataset.price = p.price;
                creat_li.dataset.image = p.image;

                list_ul.append(creat_li);

                creat_li.append(creat_div);
                creat_div.setAttribute('class', 'img_div');
               ...