Since you've labeled the question with css, I'll share my approach based on the animation effect you're aiming for.
Although I'm not well-versed in reactjs (apologies in advance), achieving the desired "move" effect on your <a> element may be challenging (if feasible at all).
My suggestion would be to create a box below your link with similar styling to the link, positioned using absolute. By utilizing simple javascript functions triggered by link clicks, you can modify its position to appear under the other link.
Here's an example:
$(".li1").on("click", function(){
$(".btn").attr('class', 'btn');
$(".btn").addClass("eff1");
});
$(".li2").on("click", function(){
$(".btn").attr('class', 'btn');
$(".btn").addClass("eff2");
});
$(".li3").on("click", function(){
$(".btn").attr('class', 'btn');
$(".btn").addClass("eff3");
});
$(".li4").on("click", function(){
$(".btn").attr('class', 'btn');
$(".btn").addClass("eff4");
});
div {
display:inline-block;
text-align:center;
position:relative;}
ul{
display: flex;
list-style-type: none;
padding: 4px;
margin: 0;
background: #efefef;
border-radius: 44px;
}
li {
position:relative;
z-index:1;
}
li a {
display: block;
text-align: center;
text-decoration: none;
padding: 7px 16px;
-webkit-transition: all 0.7s;
transition: all 0.7s;
}
.btn {
background-color:#fff;
border-radius: 44px;
height:calc(100% - 8px);
width:90px;
position:absolute;
top:4px;
left:4px;
transition:left 0.51s ease;
}
.eff1 {left:4px;}
.eff2 {left:90px;}
.eff3 {left:180px;}
.eff4 {left:270px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<ul class=" XTdVG">
<li class="li1"><a href="#">wwwww</a></li>
<li class="li2"><a href="#">wwwww</a></li>
<li class="li3"><a href="#">wwwww</a></li>
<li class="li4"><a href="#">wwwww</a></li>
</ul>
<div class="btn"></div>
</div>
Note: if your links vary in width, remember to adjust the .eff1, .eff2, .eff3, .eff4 accordingly.