JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <main>
    <section>

      <span class="intro1 fade-in">TEST TEST TEST TEST TEST</span>

      <div class="intro2">
        <p>INTRO2</p>
      </div>

      <div class="intro3">
        <p>INTRO3</p>
      </div>

      <div class="intro4">
        <p>INTRO4 TITLE</p>
        <p>INTRO5 SUBJECT ABCDEFghI</p>
      </div>

    </section>
  </main>
  <script src="src.js"></script>
</body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aliceblue;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  font-weight: 100;
}

span {
  text-align: center;
  position: absolute;
}
.intro2, .intro3, .intro4 {
  display: none;
}
.intro2, .intro3, .intro4 {
  text-align: center;
}
/* Intro animation */
.fade-in {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  animation: fadeIn 4s forwards;
}
.fade-out {
  animation: fadeOut 1s forwards;
  display: inline-block;
  text-align: center;
  position: absolute;
}


@keyframes fadeIn {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

JavaScript

const intro1 = document.getElementsByClassName('intro1')[0];
const intro2 = document.getElementsByClassName('intro2')[0];
const intro3 = document.getElementsByClassName('intro3')[0];
const intro4 = document.getElementsByClassName('intro4')[0];
const sleep = ms => new Promise(res => setTimeout(res, ms));

async function intro() {
  // INTRO 1
  await sleep(2500);
  await intro1.classList.remove('fade-in');
  await intro1.classList.add('fade-out');
	console.log(intro1.classList)
  // INTRO2
  intro2.classList.add('fade-in');
  await sleep(2000);
   
  await intro2.classList.add('fade-out');
  await intro2.classList.remove('fade-in');
  console.log(intro2.classList)

  // INTRO 3
  intro3.classList.add('fade-in');
  await sleep(2500);
  await intro2.classList.remove('fade-out');
  await intro3.classList.add('fade-out');
  await intro3.classList.remove('fade-in');

  // INTRO 4
  intro4.classList.add('fade-in');
  await sleep(2500);
  await intro3.classList.remove('fade-out');
  await intro4.classList.add('fade-out');
  await intro4.classList.remove('fade-in');
}

intro();