JSFiddle - React, Tailwind, and code Playground

HTML

<div class="group">
	<div class="elemento" id="1">Rod</div>
</div>

<div class="group">
	<div class="elemento" id="2">Papa Charlie</div>
</div>

CSS

*{font-family:"Tahoma", "Arial", sans-serif; font-size:12px}
.elemento{border:#f3f3f3 solid 1px; padding:10px; margin:2px}
#botoes{background:#FFFFCC; border:#f3f3f3 solid 1px; padding:10px; margin:2px 2px 2px 100px; width:170px; margin-top:-4px; border-top:none; display:none; position:absolute; text-align:center}

JavaScript

$(document).ready(function()
{
	$('.group').bind('mouseenter', function() {
			var html = '<div id="botoes"><b>Botão 1</b>, <b>Botão 2</b>, <b>Botão 3</b></div>';
			$(this).closest('div').append(html).css( "background", "#FFFFCC" )
			$('#botoes').show();
        });
        $('.group').bind('mouseleave', function() {
			$(this).css( "background", "#ffffff" )
			$('#botoes').remove();
        });
});