JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<div class="grow" style="background-color: #2a75a9;"> <h2>Title</h2> </br>
    Contrary to popular belief, Lorem Ipsum is not simply random text.  It has roots in a piece of classical Latin literature</div>

CSS

.grow {
  padding: 5px 5px 5px 5px;
  border-radius:10px;
    height: 50px; 
    width: 22%; 
    margin: 5px 1% 5px 1%; 
    float: left; 
    position: relative; 
    transition:height 1.5s; 
    -webkit-transition:height 1.5s; 
    text-align: center;
    overflow:hidden;

}
.grow:hover {
    height: auto; /* This is the height on hover */
}