JSFiddle - React, Tailwind, and code Playground

HTML

<br><br>
<div class="frame">
	<div class="contentTop"></div>
	bla bla bla bla bla<br>bla bla bla bla bla<br>bla bla bla bla bla<br>bla bla bla bla bla
	<div class="contentBottom"></div>
</div>
<br><br>
<div class="frame">
	<div class="contentTop"></div>
	bla bla bla bla bla<br>bla bla bla bla bla<br>bla bla bla bla bla<br>bla bla bla bla bla
	<div class="contentBottom"></div>
</div>

CSS

.frame{
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #FFFFFF;
	-webkit-box-shadow: 1px 2px 2px #91999d;
	-moz-box-shadow: 1px 2px 2px #91999d;
	box-shadow: 1px 2px 2px #91999d;
	position:relative;
	width:40%;
}


.contentTop { 
	position:absolute;
	display:none;
	background-color: #FFFFFF;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.contentBottom { 
	position:absolute;
	background-color: #FFFFFF;
	-webkit-box-shadow: 1px 2px 2px #91999d;
	-moz-box-shadow: 1px 2px 2px #91999d;
	box-shadow: 1px 2px 2px #91999d;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-bottomleft: 3px;
	-moz-border-radius-bottomright: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	display: none;
}

body{
	background-color:#e1e3e8;
}

JavaScript

$(document).on('mouseenter mouseleave', '.frame', function( e ) {
	var $el=$(this),
        h = $el.height(),
        w = $el.width(),
        $bott = $el.find(".contentBottom"),
        $top  = $el.find(".contentTop"),
        mEnt  = e.type == "mouseenter"; // boolean
    
    // this
    $el.stop().animate({borderRadius: mEnt? 0 : 3 });
    
    // top
    $top.css({bottom: h, width: w, zIndex:1})
        .html('top top top top')
        .stop().slideToggle(function(){
             $(this).css({zIndex:0});
        });
    
    // bottom    
    $bott.css({top: h, width: w,  zIndex:1})
         .html('bottom bottom bottom bottom<br>bottom bottom bottom bottom<br>bottom bottom bottom bottom<br>bottom bottom bottom bottom<br>')
         .stop().slideToggle(function(){
             $(this).css({zIndex:0});
         });
    
});