JSFiddle - React, Tailwind, and code Playground

HTML

<div id="io_testimonials" />

CSS

.w3-ul li{
  font-family:sans-serif;
  margin:10px;
}

JavaScript

// url (required), options (optional)
fetch('https://www.inflatableoffice.com/testimonials_iframe.php?user=demo&location_id=0&width=100%&number_of_reviews=10&show_average_rating=1&show_stars=1&show_date=&show_reviewer_name=1&orderby=time&iframe=0', {
    method: 'get'
}).then(
  function(response){
     return response.json();
    }
).then(function(data) {
var element = document.getElementById("io_testimonials");
var out = "";
var review_cnt=0;
var rating_sum = 0;
data.forEach((user) => {
            const { name, review, rating, time } = user
            rating_sum += parseFloat(rating);
            console.log(rating_sum);
            review_cnt++;
            var img_star = Math.round(parseFloat(rating));
            star = `<img src="https://www.inflatableoffice.com/images/${img_star}star.png" />`;
            out +=
            `<div>
                <ul class="w3-ul">
                    <li> Name : ${name}</li>
                    <li> Rating: ${rating} ${star}</li>
                    <li> Time: ${time} </li>
                    <li> Review: ${review} </li>
                </ul>
            </div>`;
});
let avg = (parseFloat(rating_sum)/parseFloat(review_cnt)).toFixed(1);
let avg_img = Math.round(avg);
var head = `<h2>Avg Rating: ${avg}</h2><img src="https://www.inflatableoffice.com/images/${avg_img}star.png" />`;
element.innerHTML = head + out;
}).catch(function(err) {
    console.log(err);
});