JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <a id="button1" href="#">
        <div>button 1</div>
    </a>
    <div id="button1text">button 1</div>
    &nbsp;&nbsp;
    <a id="button2" href="#">
        <div>button 2</div>
    </a>
    <div id="button2text">button 2</div>
</div>
<br />
<div id="button1click">You clicked on the button 1</div>
<div id="button2click">You clicked on the button 2</div>

CSS

div
{
    display:inline-block;
}
#button1text
{
    display:none;
}
#button2text
{
    display:none;
}
#button1click
{
    display:none;
    background-color:black;
    color:blue;
}
#button2click
{
    display:none;
    background-color:black;
    color:red;
}

JavaScript

$(function(){
    var button1 = $('#button1');
    var button2 = $('#button2');
    var button1text = $('#button1text');
    var button2text = $('#button2text');
    var button1click = $('#button1click');
    var button2click = $('#button2click');
    
    button1.click(function(e){
        button2text.hide();
        button2.show();
        button1.hide();
        button1text.show();
        button2click.fadeOut(500);
        setTimeout(function(){button1click.fadeIn(500);}, 500);
    });
    
    button2.click(function(e){
        button1text.hide();
        button1.show();
        button2.hide();
        button2text.show();
        button1click.fadeOut(500);
        setTimeout(function(){button2click.fadeIn(500);}, 500);
    });
});