JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<div id='div1'>Initial</div>
<a id=a1 href=#>Link 1</a>
<a id=a2 href=#>Link 2</a>
<a id=a3 href=#>Link 3</a>
</div>

JavaScript

function showIt1(message) {
    $('#div1').remove();
    $('<div id="div1">' + message + '</div>').insertBefore($('#a1'));
}

function showIt2(message) {
    $('#div1').html(message)        
        .stop()
        .css('opacity', 1);
}


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

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

$('#a3').click(function() {
    showIt2('Quux...');
    $('#div1').fadeTo(4000, 0, 'easeInExpo');
    return false;
});