JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<p><a href="http://thegeekinvasion.com" title="TGI Home">TGI Home</a>
</p>

CSS

html {
    font: 0.9em sans-serif;
}
a {
    background: #2cae85;
    border-radius:5px;
    color: #e3e3e3;
    padding:5px 10px;
    -webkit-transition: all 5s ease-in-out;
    -moz-transition: all 5s ease-in-out;
    -ms-transition: all 5s ease-in-out;
    -o-transition: all 5s ease-in-out;
    transition: all 5s ease-in-out;
}
a.animate {
    background: #e3e3e3;
    color: #2cae85;
}

JavaScript

function onTransitionEnd(event) {
    console.log(event);
    window.location.href = event.target.href;
}
$("a", this).on("click", function (e) {
    console.log("Click!");
    if ( $(this).hasClass("animate") )
        $(this).removeClass("animate");
    else
        $(this).addClass("animate");
    $("a").on("transitionend", function () {
        onTransitionEnd(e);
    });
    e.preventDefault();
});