JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>AJAX</title>
</head>

<body>
    <button id="load" onclick="load()">Load Products</button>
    <hr>
    <ul id="list"></ul>
    <script src="./index.js"></script>
</body>

</html>

CSS

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

#load {
    border: 0;
    border-radius: 5px;
    background-color: #BF616A;
    font-size: 24px;
    margin: 10px auto;

    &:hover {
        cursor: pointer;
    }
}

#list {
    display: grid;
    grid-template-rows: 10% 10%;
    grid-template-columns: 50% 50%;

    li {
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid black;
        padding: 10px;

        div {
            img {
                width: 100px;
                height: 100px;
            }
        }

        span {
            color: #3B4252;
            font-weight: bolder;
        }

        button {
            background-color: #3B4252;
            border: 0px;
            border-radius: 8px;
            color: #ECEFF4;
            font-size: 16px;
            padding: 5px;
        }
    }
}

JavaScript

// fetch('https://fakestoreapi.com/products')
//     .then(res => res.json())
//     .then(json => console.log(json))
let tagUl = document.getElementById('list');

function load() {
    fetch('https://fakestoreapi.com/products')
        .then(res => res.json())
        .then(json => {
            console.log(json);
            for (let product of json) {
                let spanTag = document.createElement('span');
                let liTag = document.createElement('li');
                let buttonTag = document.createElement('button');
                let divTag = document.createElement('div');
                let imgTag = document.createElement('img');
                imgTag.src = product.image;
                divTag.append(imgTag);
                spanTag.append(product.title);
                buttonTag.append('Details');
                buttonTag.classList.add('btn' + product.id)
                liTag.append(divTag, spanTag, buttonTag);
                tagUl.append(liTag);

                buttonTag.onclick = () => {
                    alert(product.id);
                    alert(product.category);
                    alert(product.description);
                }
            }
        })
}