JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 testimonial-wrapper">
    <div class="testimonial-item" style="display: block; opacity: 0.872447;">
         <h3>Testimonials</h3>

        <hr style="height: 4px; border: none; color: #333; background-color: #7BC83A;; width: 70px;margin-left: 0;">
         <h4>Shaf/ Seo</h4>

        <blockquote>
            <p>Hi</p>
        </blockquote>
 </div>
    <div class="testimonial-item" style="display: block; opacity: 1;">
         <h3>
                                Testimonials</h3>

        <hr style="height: 4px; border: none; color: #333; background-color: #7BC83A;; width: 70px;
                                margin-left: 0;">
         <h4>
                              Shaje/ As</h4>

        <blockquote>
            <p>Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text</p>
        </blockquote>
    </div>
</div>

JavaScript

$(document).ready(function () {

var testimonialItem = $(".testimonial-wrapper .testimonial-item");
var lengthOfItem = testimonialItem.length;
var counter = 0;
    
testimonialItem.hide();
setTimeout(function(){
startIteration(counter);
}, 1000);


function startIteration(counter) {
testimonialItem.eq(counter).fadeIn('slow', function() {
if(counter<=lengthOfItem){ 
setTimeout(function(){ 
testimonialItem.fadeOut('slow',function(){
if (counter == lengthOfItem) {
counter = 0;  
}else{
counter++;}
setTimeout(function(){ startIteration(counter);}, 500);    
});}, 2000);
}
});
}

    


});