JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<div class="container">
    <div class="expand-content">
        <p>Expanded Content</p>
    </div>
</div>

CSS

.container {
    width: 500px; 
    height: 500px; 
    background: transparent;
}
.expand-content{
    height: 0%; 
    color: #fff;
    background: green;
}
.expand-content:hover {
    height: 100%; 
    background: orange;
    transition: all 2s ease;
}
.expand-content p  {
    font-size: 35px; 
    text-align: center;     
}