JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bts">
    <div id="hoverLayer"></div>
    <div id="bt1"></div>
    <div id="bt2"></div>
    <div id="bt3"></div>
    <div id="bt4"></div>
</div>

CSS

* {
    box-sizing: border-box;
}
    #hoverLayer {
    	display: block;
	    width: 155px;
	    height: 50px;
	    border: 2px solid green;
	    position: absolute;
    }
    #bts {
	    display: block;
    	width: 620px;
    	height: 50px;
    	font-size: 0;
    	position: absolute;
    	z-index: 2;
    	top: 30px;
    	right: 0;
    	cursor: pointer;
    	left: 0;
    	margin: auto;
    }
    #bt1, #bt2, #bt3, #bt4 {
    	width: 155px;
        border:1px solid;
    	height: 100%;
    	display: inline-block;
    }

JavaScript

$('#bts div[id^="bt"]').mouseenter(function() {
    var offset = $( this ).offset();
    $("#hoverLayer").offset({ top: offset.top, left: offset.left });
})