JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<h1>Testimonials</h1>
<div id="comment"></div>
</div>
<div id="test"></div>

CSS

#container {
    border: 2px solid blue;
    padding: 3px 10px;
    margin-bottom: 20px;
}
h1 {
    color: red;
}
p {
    text-align: center;
    margin-left: 20px;
}
h3 {
    color: blue;
    text-align: right;
    margin-right: 40px;
}

JavaScript

//create and fill the array
var commt = [ ];
var name = [ ];
var i = 0;
    
commt[0] = 'comment 1';
commt[1] = 'comment 2';
commt[2] = 'comment 3';
commt[3] = 'comment 4';
name[0] = 'name 1';
name[1] = 'name 2';
name[2] = 'name 3';
name[3] = 'name 4';

//shows how many comments there are
var maxComments = 4;

//get empty elements
var comment = document.getElementById('comment');

//this section will create the inital comment shown
//creates a random number 
var number = Math.floor(Math.random() * 4);

//adds the HTML to div
window.onload = comment.innerHTML = "<p>" + commt[number] + "</p>" +
    "<h3 class='commentSliderH3'>" + name[number] + "</h3>";

//This rotates the comments
setInterval(function () { //same content as above
    var number = Math.floor(Math.random() * maxComments);
    comment.innerHTML = "<p>" + commt[number] + "</p>" +
    "<h3 class='commentSliderH3'>" + name[number] + "</h3>";
}, 1931); // Runs the function every 9031ms