JSFiddle - React, Tailwind, and code Playground

by Anik Islam Abhi

HTML

<p id="hello"><span class="first">Please say hello.</span></p>

CSS

#hello {font-family: 'KeplerStd-MediumDisp';font-size:42px;letter-spacing:1px; color:#222222;   border-bottom: 3px solid #222222;transition:1s all;  }


#hello:hover { border-bottom: 3px solid transparent; transition:1s all; }

JavaScript

$('#hello').attr('data-originalText', function () {
    return (this.textContent || this.innerText).trim();
}).hover(function () {
    $(this).fadeOut(500, function () {
        $(this).html('<a href="mailto:[email protected]">[email protected]</a>').fadeIn();
    });
},

function () {
    $(this).fadeOut(800, function () {
        $(this).text($(this).attr('data-originalText')).fadeIn();
    });
});