JSFiddle - React, Tailwind, and code Playground

by malamine_kebe

HTML

<br /><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>

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;
}

JavaScript

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