JSFiddle - React, Tailwind, and code Playground

by Humphry Huang

HTML

<div id="wrap">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>

CSS

div { width: 10em; height: 3em; }

#a { background: #FF003C }
#b { background: #FF5A5A }
#c { background: #FF9678 }
#d { background: #FFD296 }
#wrap { height: 3em ; overflow: hidden; }

JavaScript

var $wrap = $("#wrap") ;
$wrap.hover(function(){
    $wrap.animate({
        height: "15em"
    }) ;
},function(){
    $wrap.animate({
        height: "3em"
    }) ;
});