JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <head></head>
    
    <body>
        <div id="console">
             <h2>Console</h2>
        </div>
        <div> 
            <a href="http://www.google.com">Google</a>
            <a href="http://www.stackoverflow.com">Stack Overflow</a>
            <a href="http://www.facebook.com">Facebook</a>
        </div>
        <div id="dataview"></div>
    </body>
    </html

CSS

#dataview {
    display:none;
}

div {
    border: 1px solid black;
}
#console {
    background: #DDF;
}
#console h2 {
    font-size: 1.5em;
}

JavaScript

var lastData;
$(function () {
    log("Click a link to load it");
    $("a").click(function(event) {
        loadData($(this).attr("href"));
        event.preventDefault();
    });
});

function log(msg) {
    $("#console").append("<pre>" + msg + "</pre");
}

function loadData(data) {
		alert(data);
    if(lastData == data) {
        $("#dataview").slideUp();
    } else {
        $("#dataview").html(data);
        $("#dataview").slideDown();
    }
    lastData = data;
}