JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-md-12 slogan text-right">
  <h1 class="slogan1">test 1</h1>
  <h1 class="slogan2">test 2</h1>
  <h1 class="slogan3">test 3</h1>
  <p class="slogan4">test 4</p>

  <h1 class="slogan5">test 5</h1>
  <h1 class="slogan6">test 6</h1>
  <h1 class="slogan7">test 7</h1>
  <p class="slogan8">test 8</p>
</div>

CSS

h1, p {
  display: none;
}

JavaScript

/* The cycle function performs successive fadeIns using the provided selectors
 * and finishes by fading them all out, and executing a provided callback
 */
function cycle(options) {
  var settings = {
    'selectors': options.selectors || [],
    'remaining': options.selectors.slice().reverse() || [],
    'delay'    : options.delay || 200,
    'duration' : options.duration || 500,
    'complete' : options.complete || function() {}
  };

  cycleStep();

  function cycleStep() {
    if(!settings.remaining.length){
        var callbackExecuted = false;
        $( settings.selectors.join(', ') ).delay(settings.delay)
                                          .fadeOut(settings.duration, function(){
                                            if(!callbackExecuted){
                                                settings.complete();
                                                callbackExecuted = true;
                                              }
                                          });
    }
    else
        $( settings.remaining.pop() ).delay(settings.delay)
                                     .fadeIn(settings.duration, cycleStep);
  }
}

/* This function will loop the cycles with the options you provide it */
function myLoop(){
  cycle({
    selectors: ['.slogan1', '.slogan2', '.slogan3', '.slogan4'],
    complete: function() {
      cycle({
        selectors: ['.slogan5', '.slogan6', '.slogan7', '.slogan8'],
        complete: myLoop
      });
    }
  });
}

// Execute the loop
myLoop();