JSFiddle - React, Tailwind, and code Playground

HTML

<div class="links">
    <a href="#ajax1">Load HTML</a>
    <a href="#ajax2">Load HTML</a>
</div>
<div class="main">
    <div class="sliderContent">Click above url to load content</div>
</div>

CSS

html, body {
    margin: 0;
    overflow: hidden;
}

.links {
    width: 100%;
    background: lightgrey;
    padding: 20px;
}

.sliderContent {
    height: 500px;
    width: 500px;
    margin: 50px;
    background: lightgrey;
    overflow: hidden;
}

JavaScript

$(document).ready(function(){
    var router = {
        "#ajax1" : "http://fiddle.jshell.net/yunpwkwg/3/",
        "#ajax2" : "http://fiddle.jshell.net/yunpwkwg/4/",
    };
    $(window).on("hashchange", function(){
        var route = router[location.hash];
        if (route === undefined) {
            return;
        }
        else {            
            $(".sliderContent").load( "" + route + " #content" );
        }            
    });
});