JSFiddle - React, Tailwind, and code Playground

by msm595

HTML

<div id="name">Alex</div>

CSS

#name {
    position: absolute;
    top:50%;
    width: 80px;
    font: 35px  'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', 'Luxi Sans', Tahoma, sans-serif;
    font-weight: bold;
    margin-top: -20px;
    margin-left: -40px;
    left: -100px;
}

JavaScript

$('#name').animate(
    {left: '50%'},
    500, 'swing', function() {
        $(this).clone().appendTo('body').animate({
            width: '160px',
            height: '80px',
            marginLeft: '-80px',
            marginTop: '-40px',
            fontSize: '70px',
            opacity: 0
        }, 300);
    }
);