JSFiddle - React, Tailwind, and code Playground

by edelman

HTML

<a id="flash" href="#">Flash me!</a>

SCSS

a {
    color: black;
    text-decoration: none;
  background: white;  
-webkit-transition: all 300ms ease;
 -moz-transition: all 300ms ease;
transition: all 300ms ease;    
  &.hover {
background: blue;  
color: white;    
}
}

JavaScript

function highlightLink(e) {
    //flash a link 3 times
    var link = $(e.highlightId).addClass('highlighting'),
        toggle = function() {
            link.toggleClass('hover');
        },
        callback = e.callback || $.noop,
        stallTime = e.stallTime || 1000;
    link.addClass('hover'); //on
    setTimeout(function() {
        toggle(); //off
        setTimeout(function() {
            toggle(); //on
            setTimeout(function() {
                toggle(); //off
                setTimeout(function() {
                    toggle(); //on, stays for stallTime
                    setTimeout(function() {
                        toggle(); //off
                        callback();
                    }, stallTime);
                }, 300);
            }, 300);
        }, 300);
    }, 300);
}

var opts = { 
    highlightId: '#flash'    
}
highlightLink(opts);