JSFiddle - React, Tailwind, and code Playground

by Thomas Gladdines

HTML

<section class="bg-primary testimonial-wrapper" id="testimonials">
    <div class="container">
        <div class="row">
            <div class="col-xs-2 col-xs-offset-2">
                <i class="fa fa-4x fa-quote-left"></i>
            </div>
            <div class="col-xs-6 testimonial-wrapper">
                <div class="testimonial-item">
                    <p>Testimonial comment 1.</p>
                    <p><em>- Oliver Nicholson</em></p>
                </div>
                <div class="testimonial-item">
				<p>Another quote!<br />Another line of text :P</p>
                    <p><em>- Nollie Bollie</em></p>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

.testimonial-wrapper {
	border: 1px solid red;
}

JavaScript

var testimonials = $(".testimonial-item");
  testimonials.hide();
  var testimonialIndex = -1;
  
  //Get max height
  var wrapperHeight = 0;
  testimonials.each(function() {
  	wrapperHeight = $(this).outerHeight() > wrapperHeight ? $(this).outerHeight():wrapperHeight;
  });
  //Set max height
  $(".testimonial-wrapper").height(wrapperHeight);

  function showNextTestimonial() {
      ++testimonialIndex;
      testimonials.eq(testimonialIndex % testimonials.length)
          .fadeIn(2000)
          .delay(500)
          .fadeOut(2000, showNextTestimonial);
  }

  showNextTestimonial();