JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<div class="hidden"></div>

CSS

body {
  background-color: gainsboro;
}

div {
  width: 200px;
  height: 200px;
  border-color: #fff;
  margin: 20px;
  background-color: grey;
	-webkit-transition: all 1s ease;
	   -moz-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	     -o-transition: all 1s ease;
	        transition: all 1s ease;
}

.hidden {
  opacity: 0;
  visibility: hidden;
}

.cool {
    background-color: steelblue;
    border: 10px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

JavaScript

var $div = $('div');

setTimeout(function(){
   $div.removeClass('hidden');
}, 2000);

setTimeout(function(){
   $div.addClass('cool');
}, 4000);