JSFiddle - React, Tailwind, and code Playground

by Zero Fx

HTML

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

CSS

.test2 {
				border:1px solid #fff;
				background: pink;
				color: white;
				margin: 0;
				padding: 5px;
				width: 100px;
                display:block;
    
        /*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 {
				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

$('.link').mouseenter(function () {
        $(this).next().stop().animate({
            width: "200px"
        })

    }).mouseleave(function () {
        $(this).next().stop().animate({
            width: "100px"
        });
    });