JSFiddle - React, Tailwind, and code Playground

HTML

<!--
Stackoverflow: http://stackoverflow.com/q/11620385/1195891
Answer by arttronics.  Alternate answer here: http://jsfiddle.net/Ba3r6/
-->

<div id="status">Initial</div> <br />

<a id="a1" href="#">Link 1</a>
<a id="a2" href="#">Link 2</a>
<a id="a3" href="#">Link 3</a>

CSS

/* The following setting fixes a Firefox v14.1 bug */
/* Specifically, this setting allows Link1 or Link2 to show quickly during animation of Link3 */
#status{
    /* Also use  'display:table'  as alternate setting. */
    display: inline-block ;
}


/*

Other important discovery:
The above 'display' attribute is not required, if for example, you just use CSS 'font-size: 28px' or larger in Firefox and without specifying font-family or font-weight (however, only font-size was tested and true).

*/

JavaScript

function showIt(message) {
    $('#status').empty().append(message)
        .stop()
        .css('opacity', 1);
}

$('#a1').click(function() {
    showIt('Foo!');
    return false;
});

$('#a2').click(function() {
    showIt('Bar!');
    return false;
});

$('#a3').click(function() {
    showIt('Quux...');
    $('#status').fadeTo(3000, 0, 'easeInExpo');
    return false;
});


// For alternate markup that uses only 1 Click Event listener that might be useful, click this jsFiddle demo: http://jsfiddle.net/Ba3r6/