JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="animate()">
  <h1 id="mainText"><input type="text" /></h1>
</body>

CSS

#mainText {
  margin: 0px;
  display: inline-block;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 100px;
  width: 100%;
  transition: width 3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

JavaScript

function animate() {
  document.getElementById("mainText").style.width = "0%";

}