JSFiddle - React, Tailwind, and code Playground

HTML

<a class="link" href="#">Click</a>
<p class="test2"><a href="#">TEST-5!!</a></p>

<br/>
<br/>

<p class="test"><a href="#">TEST-1</a></p>
<p class="test"><a href="#">TEST-2</a></p>
<p class="test"><a href="#">TEST-3</a></p>
<p class="test"><a href="#">TEST-4</a></p>

CSS

.test2 {
				border:1px solid #fff;
				background: pink;
				color: white;
				margin: 0;
				padding: 5px;
				width: 100px;
			}


.test {
				border:1px solid #fff;
				background: red;
				color: white;
				margin: 0;
				padding: 5px;
				width: 100px;
				/*Firefox*/
				-moz-border-top-left-radius: 0px;
				-moz-border-top-right-radius: 30px;
				-moz-border-bottom-right-radius: 30px;
				-moz-border-bottom-left-radius: 0px;
				/*Safari, Chrome*/
				-webkit-border-top-left-radius: 0px;
				-webkit-border-top-right-radius: 30px;
				-webkit-border-bottom-right-radius: 30px;
				-webkit-border-bottom-left-radius: 0px;
				border-top-left-radius: 0px;
				border-top-right-radius: 30px;
				border-bottom-right-radius: 30px;
				border-bottom-left-radius: 0px;

			}

			.test a {
				color: #fff;
				text-decoration: none;
			}

JavaScript

$(document).ready(function() {
				$('.test').mousemove(function() {
					$(this).stop().animate({width:"200px"})
				});
				
				$('.test').mouseout(function() {
					$(this).stop().animate({width:"100px"});
				});
    $('.test2').click(function() {
					$('.test').stop().animate({width:"200px"}, function() {
					$('.test').stop().animate({width:"100px"});
				});
				})
    
			});