JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">    
    <div class="menu left" id="menu">
        <ul id="menu_items">
            <li>Button 1</li>
            <li>Button 2</li>
            <li>Button 3</li>
            <li>Button 4</li>
        </ul>
    </div>
    <div class="text left" id="text">
        <div id="text-0">Text 1</div>
        <div id="text-1" class="tc">Text 2</div>
        <div id="text-2" class="tc">Text 3</div>
        <div id="text-3" class="tc">Text 4</div>
    </div>
    <div class="clear"></div>    
</div>

CSS

.container {
    font-family: sans-serif;
}

#menu_items li {
    background: #333;
    color: #fff;
    padding: 4px;
    margin: 4px;
    cursor: pointer;
}
.text {
    padding: 20px;
}
.menu {
    padding: 10px;
    border-right: 1px solid #666;
}
.tc {
    display: none;
}
.left {
    float: left;
}
.clear {
    clear: both;
}

JavaScript

$(document).ready( function() {    
    $('#menu_items li').click( function() {
        var i = $(this).index();
        $('.text div').hide();
        $('#text-'+i).show();      
    });
});