JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<div id="box">

  <div></div>
  <h1>
  Hello!
  </h1>

</div>

CSS

#box div {
  height: 0px;
  width: 100px;
  background-color: blue;
  
  transition: height .4s;
  transition-delay: 0.25s;
  
}

#box h1 {
  opacity: 1; 
  transition: opacity 0.25s;
}

#box.expanded div {
  height: 100px;
}

#box.expanded h1 {
   opacity: 0;
}

JavaScript

let val = 0;
const box = document.getElementById('box');

setInterval(() => {

	if (val) {
		box.className="expanded";
  } else {
		box.className="";
  }
  val = 1 - val;

}, 1000);