JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="open-list">
    <li><a class="load-me" href="/echo/html/">link 1</a></li>
    <li><a class="load-me" href="/echo/html/">link 2</a></li>
    <li><a class="load-me" href="/echo/html/">link 3</a></li>
    <li><a class="load-me" href="/echo/html/">link 4</a></li>
    <li><a class="load-me" href="/echo/html/">link 5</a></li>
</ul>

<div class="main-container">
    <p>first content</p>
</div>

CSS

.main-container {background-color: #d0d0d0; height: 500px; width: 500px;}

JavaScript

$('.load-me').click(function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    var txt = $(this).text();
    $('.main-container').fadeOut(200, function(){
        $(this).load(url, function() {
            // for demo:
            $(this).html('Loaded some awesome content from ' + txt).slideDown(200);
        });
    });
});