JSFiddle - React, Tailwind, and code Playground

by tmyie

HTML

<div class="center"> <a class="title"> Move me  
        <a class="twitter"> &mdash; Twitter </a>
</a>
</div>

CSS

.center {
    text-align: center;
}
.title, .twitter {
    position: relative;
}
.twitter {
    text-align: left;
    opacity: 0.1;
}

JavaScript

$(document).ready(function(){

    $('.center').mouseenter(function(){
        $('.title').animate({ right:"30px"}, 1000);
        $('.twitter').animate({left:"30px", opacity: 1}, 1000);

    });
    
        $('.center').mouseleave(function(){
        $('.title').animate({ left:"30px"}, 1000);
        $('.twitter').animate({right:"30px", opacity: 0.1}, 1000);

    });

});