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.fps = 16; //FPS 1000 / 60

	animator.animate = function (el) {
	    var self = this,
	    	startTime = Date.now(); //Get the start time
	    
	    self.deltaHeight = (animator.endHeight / animator.speed) * this.fps; //Calculate the height variation

	    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) {
	            //If the client height is less than the max height (200px)
	            if (el.clientHeight < self.endHeight) {
	                self.startHeight = self.startHeight + self.deltaHeight; //Adjust the height
	                el.style.height = self.startHeight + 'px'; //Animate the height
	            }
	        } else {
	            el.style.height = self.endHeight + 'px';
	            clearInterval(self.interval);
	        }
	    },  this.fps); //60FPS
	};

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