JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contentPanel">
      <div class="content">
         <div style="border: solid 2px black; text-align: center">
            This is first content
         </div>
      </div>
      <div class="content">
         <div style="border: solid 2px black; text-align: center">
            This is second content
         </div>
      </div>
      <div class="content">
         <div style="border: solid 2px black; text-align: center">
            This is third content
         </div>
      </div>
   </div>

CSS

.content { display: none; }

JavaScript

function fadeContent() {
  $(".contentPanel .content:hidden:first").fadeIn(500).delay(2000).fadeOut(500, function() {
    $(this).appendTo($(this).parent());
    fadeContent();
  });
}
fadeContent();