JSFiddle - React, Tailwind, and code Playground

by Maksim

HTML

<!-- Begin Testimonials Loop -->
<div id="camps-quote">
<div id="testimonials">
    
<div class="slide">
<div class="testimonial-quote">
<p>Testimonial #3 would be this one!</p>
</div>
</div>
    
<div class="slide" style="display:none">
<div class="testimonial-quote">
<p>This would be quote #2</p>
</div>
</div>
    
<div class="slide" style="display:none">
<div class="testimonial-quote">
<p>Hello this is quote #1</p>
</div>
</div>
    
</div>
<!-- End Testimonials -->
</div>

CSS

#camps-quote {
    margin-top:50px;
    box-shadow: 7px 7px 7px #C0C0C0; 
    background-color: #7D9EC0; 
    height: 120px; 
    font-size: 16px;
    padding:7px;
    font-family: Arial;
    width:500px;
    margin-left:200px;
    overflow:hidden;
}

#testimonials{

}

#testimonials .slide {color: #fff;}

#testimonials .testimonial-quote {
    padding: 3px 0 0 65px; 
    line-height: 1.5em; 
    font-family:Helvetica, Arial, sans-serif !important; 
    font-size: 16px; 
    font-weight: normal; 
    font-style: italic; 
    margin: 10px 0 20px 0;
}

JavaScript

jQuery(document).ready(function(){
    setInterval(function(){
        jQuery('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
            if(jQuery(this).next('.slide').size()){
                jQuery(this).next().fadeIn(1000);
            }
            else{
                jQuery('#testimonials .slide').eq(0).fadeIn(1000);
            }
        });
    },1500);    
});