Typing Effect Using Tailwind UI

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">

<style>
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.typing-container {
  overflow: hidden;
  border-right: .15em solid #000;
  white-space: nowrap;
}
</style>

<div class="container mx-auto p-4 my-32">
  <div class="py-20 bg-black text-white text-center rounded-xl">
    <h1 class="text-xl font-medium mb-4">Typing Effect</h1>
    <div class="text-4xl font-bold typing-container" id="typing-container">
    </div>
  </div>
</div>

<script>
  // JavaScript for Typing Effect
  const texts = ["Hello, Tailwind CSS!", "This is a typing effect.", "Enjoy the animation!"];
  const typingContainer = document.getElementById("typing-container");
  let currentTextIndex = 0;
  let currentText = "";
  let isDeleting = false;
  let typingSpeed = 100; // Adjust the typing speed (milliseconds per character)

  function type() {
    const text = texts[currentTextIndex];
    if (isDeleting) {
      currentText = text.substring(0, currentText.length - 1);
    } else {
      currentText = text.substring(0, currentText.length + 1);
    }

    typingContainer.innerHTML = currentText;

    let typingDelay = isDeleting ? typingSpeed / 2 : typingSpeed;

    if (!isDeleting && currentText === text) {
      typingDelay = 1500; // Pause after typing
      isDeleting = true;
    } else if (isDeleting && currentText === "") {
      isDeleting = false;
      currentTextIndex++;
      if (currentTextIndex === texts.length) {
        currentTextIndex = 0;
      }
    }

    setTimeout(type, typingDelay);
  }

  document.addEventListener("DOMContentLoaded", function () {
    type();
  });
</script>