JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div class="text-slider">
  <p class="changing-text">Welcome to my website!</p>
	<p class="changing-text">My name is Joe</p>
	<p class="changing-text">I am a human</p>
	<p class="changing-text">that loves procastinating</p>
	<p class="changing-text">hehe!</p>
</div>
</body>
</html>

JavaScript

(function() {
	function createStyleSheet() {
		let $style = document.createElement("style");
		$style.type = "text/css";
		$style.innerHTML = `
			.changing-text-hide {
				display: none !important;
			}

			.changing-text-slide-in {
				animation: textSliderSlideIn 300ms;
				animation-iteration-count: 1;
			}

			@keyframes textSliderSlideIn {
				0% {
					opacity: 0;
					transform: translate(30px, 0px);
				}
				50% {
					opacity: 0.5;
					transform: translate(-10px, 0px);	
				}
				100% {
					opacity: 1;
					transform: translate(0px, 0px);
				}
			}

			.changing-text-slide-out {
				animation: textSliderSlideOut 1100ms;
				animation-iteration-count: 1;
				transform-origin: left;
			}

			@keyframes textSliderSlideOut {
				0% {
					opacity: 1;
					transform: rotate(0deg);
				}
				100% {
					opacity: 0;
					transform: rotate(90deg);
				}
			}
		`.trim();
		document.head.appendChild($style);
	}

	let $textSlider = document.querySelector(".text-slider");

	if ($textSlider) {
		createStyleSheet();

		let $changingTexts = $textSlider.querySelectorAll(".changing-text");
		let changingTextsLength = $changingTexts.length;

		for (let i = 0; i < changingTextsLength; ++i) {
			$changingTexts[i].classList.add("changing-text-hide");
		}

		let currentChangingText = 0;
		function changeText() {
			if (currentChangingText == changingTextsLength) currentChangingText = 0;
			$changingTexts[currentChangingText].setAttribute("class", "changing-text changing-text-slide-in");

			setTimeout(function() {
				setTimeout(function() {
					console.log(`I am running ${currentChangingText}`);
					$changingTexts[currentChangingText].classList.remove("changing-text-slide-in");
					$changingTexts[currentChangingText].classList.add("changing-text-slide-out");
				}, 1000);

				$changingTexts[currentChangingText].classList.add("changing-text-hide");
				++currentChangingText;
				changeText();
			}, 2000);
		}

		window.addEventListener("load", function()...