JSFiddle - React, Tailwind, and code Playground

HTML

<script src="google.com"></script>
<div id='page-wrap'>
    
    <div id='content'>
        
        <div id='item1' class='content' href= google.com>item 1 content</div>
        <div id='item2' class='content'>item 2 content</div>
        <div id='item3' class='content'>item 3 content</div>
        <div id='item4' class='content'>item 4 content</div>
        
    </div>
    <div id='menu'>
        
        <ul>
            <li><a href='#' data-id='item1'>item 1</a></li>
            <li><a href='#' data-id='item2'>item 2</a></li>
            <li><a href='#' data-id='item3'>item 3</a></li>
            <li><a href='#' data-id='item4'>item 4</a></li>
            
        </ul>
        
    </div>
    
</div>

CSS

.content{
    display: none;   
}
.show{
    display: block;   
}

#content{
    width: 40%;
    min-width: 40%;
    display: inline-block;
}

#menu{
    float: right;
    width: 40%;
    display: inline-block;
}

JavaScript

$(document).ready(function() {

    $('#content div:first').addClass('show');

    $('#menu a').click(function() {

        var id = $(this).data('id');
        $('.show').removeClass('show');
        $('#' + id).addClass('show');

    });

});