JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Menu with Bounce Effect</title>
</head>
<body>
	
   <ul id="menu">
   	
     <li><a href="#">Home</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Products</a></li>
     <li><a href="#">About Us</a></li>

   </ul>

</body>
</html>

CSS

#menu { list-style-type: none; font: 20px Verdana; padding: 0; }
      #menu li { 
      	         width: 450px; 
      	         margin: 5px 0; 
      	         padding: 0; 
      	         background-color: #BAE800; 
      	         border-top-right-radius: 300px 35px; 
      	         border-bottom-right-radius: 300px 35px; 
      	       }
         #menu li a {  text-decoration: none; display: block; padding: 10px 0 10px 280px; color: #FFF; }

JavaScript

$(document).ready(function() {

  $('#menu li').hover(function() {


  	$(this).stop().animate({ padding-left: '50px' }, 500, 'easeOutCirc');


  }, function() {

  	$(this).stop().animate({ padding-left: '0px' }, 500, 'easeOutBounce');

  });

 });