JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"></div>

CSS

#box { 
  background-color: #CCC;
  height: 0px;
  width: 300px;
}

JavaScript

(function () {
	'use strict';

	var animator = {};

	animator.endHeight = 200; //The end height
	animator.interval = null; //Create a variable to hold our interval
	animator.speed = 500; //500ms
	animator.startHeight = 0; //The start height

	animator.animate = function (el) {
		var self = this,
			startTime = Date.now(); //Get the start time

		this.interval = setInterval(function () {
			var elapsed = Date.now() - startTime, //Work out the elapsed time
				maxHeight = self.maxHeight; //Cache the max height 

			//If the elapsed time is less than the speed (500ms)
			if (elapsed < self.speed) {
				console.log('Still in the timeframe');

				//If the client height is less than the max height (200px)
				if (el.clientHeight < self.endHeight) {
					self.startHeight = self.startHeight + 5; //Adjust the height
					el.style.height = self.startHeight + 'px'; //Animate the height
				}
			} else {
				console.log('Stop and clear the interval');
				el.style.height = self.endHeight + 'px';
				clearInterval(self.interval);
			}
		}, 16); //60FPS
	};

	animator.animate(document.getElementById('box'));
}());