JSFiddle - React, Tailwind, and code Playground

by Aravi

HTML

<div class="name hide">
  Lebron James
</div>

CSS

.name {
  background-color: orange;
  display: inline-block;
  padding: 5px;
  transition: color 10s;
  color: transparent;
}
.color-blue { color: blue; }

.hide { opacity: 0 }

JavaScript

const name = document.querySelector(".name");

setTimeout(() => {
  name.classList.remove("hide");
  name.classList.add("color-blue")
  // name.style.color = "blue";
}, 2000)