JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<blockquote class="quotelist" id="rotator-container">
  <div class="quote show">
    Best explanation I've ever received on these topics.
  </div>
  <div class="quote fade">
    This was seriously outstanding! This speaker has a great understanding of inpatient and outpatient software, delivery systems, discharge counseling that may be different from what may/not be covered by insurance plans in outpatient setting, etc., pharmacists
    and nursing errors in general: a very broad understanding of where things go wrong.
  </div>
  <div class="quote fade">
    Excellent! I have a much greater understanding.
  </div>
</blockquote>

CSS

.quote.fade {
  transition:opacity .75s,height .75s;
  opacity:0;
  height:0;
}
.quote.show {
  transition:opacity .35s,height .75s;
  opacity:1;
  height:40px;
}

JavaScript

$elements = $('.quotelist > div');

setInterval(function() {
  var $cur = $(".show"), $old = $cur;
  var $next = $cur.next(".quote");
  if ($next.length == 0) {
    $next = $elements.first();
  }
  $cur.removeClass("show").addClass("fade");
  $old.detach();
  $old.appendTo('.quotelist');
  $next.removeClass("fade").addClass("show");
}, 2000);