JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "nav">
    
    <div id="slider">Move your mouse<span id = "topArrow"></span><span id = "bottomArrow"></span></div>
    
    with any luck this should float underneath the red box
</div>

CSS

#slider{
  position : absolute;
  background-color : red;
  color : white;
  width: 150px;
  height: 40px;
    
}


#nav{
    position: relative;
    float: left;
    width: 800px;
    height: 40px;
    background-color: blue;
}

JavaScript

var mouseX = 0, mouseY = 0;
$('#nav').mousemove(function(e){
   mouseX = e.pageX;
});

// cache the selector
var follower = $("#slider");
var xp = 0, sliderWidth = 150;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - 75 - xp) / 30;
    
    if (xp < 0) xp = 0;
    if (xp + sliderWidth > 800) xp = 800 - sliderWidth;
   
    follower.css({left:xp});
    
}, 30);