JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:void(0);" class="ScrollDownArrow">  
                            <div class="Hint">
                                <p>Skip to next section</p>
                                <img src="https://cdn0.iconfinder.com/data/icons/feather/96/591279-arrow-down-128.png" />
                            </div>
                    </a>

CSS

*{
    padding:0;
    margin:0;   
}

.Hint
{
    display: block;
    height: 38px;
    line-height: 34px;
    text-align: center;
    border:2px solid  #f6473e;
    border-radius: 20px;
    -o-border-radius: 20px;
    -moz-border-radius: 20px;
    -wbkit-border-radius: 20px;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    transition: width 0.8s ease 2.6s,  margin 0.8s ease 2.6s ,  padding 0.8s ease 2.6s;
    -o-transition:  width 0.8s ease 2.6s,  margin 0.8s ease 2.6s,  padding 0.8s ease 2.6s;
    -moz-transition:  width 0.8s ease 2.6s,  margin 0.8s ease 2.6s,  padding 0.8s ease 2.6s;
    -webkit-transition:  width 0.8s ease 2.6s,  margin 0.8s ease 2.6s,  padding 0.8s ease 2.6s;
    width:auto;/*beats 100%*/
    padding: 0 40px; /*40 padding instead of width*/
    overflow:hidden;
    position:relative;
    margin:0;
}
.Hint.Show p
{
    display:inline-block;   
}
.Hint p
{
    color:#000;
    width:100%;/*Jquery animates to 0px*/
    font-size: 0.8em;
    }

.Hint img
{
    display:none; /*Jquery will fadeIn/Out later*/
    width:100%;
    max-width:38px;
    position:absolute;
    top:-2px;
    transform:translateX(-50%);
    -o-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
}

.ScrollDownArrow
{
    display: block;
    height: 38px;
    width: auto;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform:translateX(-50%);
    -o-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    background-size: 100%;
    z-index: 1000;
}

JavaScript

/*$(document).ready(function(){
    $('.ScrollDownArrow').click(function(){
        if ($(this).hasClass('Clicked')){
            $(this).removeClass('Clicked');
            $('.Hint').removeClass('Show');
        }else{
            $(this).addClass('Clicked');   
            $('.Hint').addClass('Show'); 
        }
               
    });
});*/

$(document).ready(function(){
    $(".ScrollDownArrow").click(function(){
        if($(".ScrollDownArrow").hasClass("Clicked")){
           $(".Hint img").fadeOut(500); 
           $(".Hint p").delay(500)/*wait on fadeout*/.animate({width: 200} /*Unfortunately width: 100% does not seem to work so I took a px value :(*/, 1000).animate({opacity:1}, 500); 
           $(".ScrollDownArrow").removeClass("Clicked");
        }else{
           $(".Hint p").animate({opacity:0.01}/*fade p out without making its width disappear for the width animation*/, 500).animate({width: 0}, 1000);
           $(".Hint img").delay(1500).fadeIn(500);
           $(".ScrollDownArrow").addClass("Clicked");
        }
    }); // End Click
});//End Ready