JSFiddle - React, Tailwind, and code Playground

HTML

<br><br>

<div class="frame">
	<div class="content"></div>
	<div class="inside">bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br /></div>
	<div class="content2"></div>
</div>

CSS

.frame{
	border-style:solid;
	border-width:1px;
	width:30%;
	position:relative;
}

.content { 
    border-style:solid;
    border-width:1px 1px 0px 1px;
    position:absolute;
    display:none;
    left: -1px;
}

.content2 { 
    border-style:solid;
    border-width:0px 1px 1px 1px;
    position:absolute;
    display:none;
    left: -1px;
}

JavaScript

$(document).on('mouseenter', '.frame', function() {	
	var el = $(this);
	content = $(".content");
	content2 = $(".content2");
	content.css({"bottom":el.height(),"width":el.width()});
    content2.css({"top":el.height(),"width":el.width()});
	content.html('ok ok ok ok');
	content2.html('ok ok ok ok');
	el.css("border-top-color","#FFFFFF");
    el.css("border-bottom-color","#FFFFFF");
    content.stop(true, true).slideToggle(300);
    content2.stop(true, true).slideToggle(300);
}).on('mouseleave','.frame', function() {
	var el = $(this);
	content = $(".content");
	content2 = $(".content2");
	content.stop(true, true).slideToggle(300, function(){
		content.html('');
		el.css("border-top-color","#000000");
        el.css("border-bottom-color","#000000");
	});
	content2.stop(true, true).slideToggle(300)
});