JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="item">
    <span class="opacity">
        
    </span>
</a>

CSS

.item{
    position: relative;
}
.opacity{
    position: absolute;
    height: 50px;
    width: 50px;
    background: red;
}

JavaScript

$( document ).ready(function() {
    
    $(".item")
    .mouseenter(function (){
        $(this).children(".opacity")
        .animate({ width: 300 }, 2000 );
    })
    
    .mouseleave(function(){
        $(this).children(".opacity").removeAttr('style');
    });
    
    
});