JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div class="test">
            <div class="box">
                <div class="arrow"></div> 
            </div>
            <a href="#" class="btnStartAni">Animate</a>
        </div>
    </body>
</html>

CSS

.test { margin: 0; padding: 0;}
.test .box { width: 150px; height: 140px; background-color: red; position: relative; }
.test .box .arrow { width: 50px; height: 50px; background-color: black; position: absolute; bottom: 0; right: -50px;}

JavaScript

jQuery(".test a.btnStartAni").on("click", function(e){
    e.preventDefault();
    jQuery(".box").animate({ width: 400}, 800).css('overflow', 'visible');
    
});