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();
        $('.main-container').hide().load($(this).attr('href'), function() {
            // for demo:
            $(this).html('Loaded some awesom content').fadeIn(800);
        })
    });