JSFiddle - React, Tailwind, and code Playground

by Fredrik Berggren

HTML

<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<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" style="background:red;">
                <div class="testimonial-item">
                  <p>Testimonial comment 1.</p>
                  <p><em>- Oliver Nicholson</em></p>
                </div>
                <div class="testimonial-item">
                  <p>Another quote!<br/><br/><br/>Testing</p>
                  <p><em>- Nollie Bollie</em></p>
                </div>
              </div>
            </div>
          </div>
        </section>

JavaScript

$(document).ready(function() {
	var wrapper = $('.testimonial-wrapper');
  var testimonials = $(".testimonial-item");
  //from accepted answer here: http://stackoverflow.com/questions/6060992/element-with-the-max-height-from-a-set-of-elements
  var maxHeight = Math.max.apply(null, testimonials.map(function ()
    {
        return $(this).outerHeight();
    }).get());
    
  wrapper.height(maxHeight);
  
  testimonials.hide();
  var testimonialIndex = -1;

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

  showNextTestimonial();

});