JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<div class="wrap">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

<div class="item_menu"><header>X</header><div class="buttons"><button>Example</button></div><div class="arrow"></div></div>

CSS

.item {
    width: 200px;
    height: 40px;
    border: 1px solid #000;
    margin-bottom: 5px;
}
.wrap {
    margin-left: 300px;
}

.item_menu {
    position: absolute;
	width: 25px;
	border: 1px solid #ddd;
	background-color: #f7f7f7;
	color: #aaa;
	padding: 0px 6px;
}

.buttons {
    display: none;
}

.item_menu .arrow {
	width: 0px;
	height: 0px;
	-webkit-transform:rotate(360deg);
	border-style: solid;
	border-width: 12.5px 0 12.5px 21.7px;
	border-color: transparent transparent transparent #f7f7f7;
	top: 0px;
	right: -21px;
	position: absolute;
}
}

JavaScript

$(document).on('mouseenter', '.item', function( event ) {
	var left = $(this).offset().left - 50;
	$(".item_menu").css("left", left).css("top", $(this).offset().top - 15);
		$(".item_menu").hover(function() {
			var that = this;
			$(this).find('header').fadeOut(200);
			$(this).animate({'left': left-90, 'width': 120}, 200, function() {
				$(that).find('.buttons').slideDown(200);
			});
			
		}, function() { 
			$(this).animate({'left': left, 'width': 25}, 200);
			$(this).find('header').fadeIn(200);
			$(this).find('.body').slideUp(400); 
		});
});