JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="home" class="button">Home</a>
<a href="#" id="about" class="button">about</a>
<a href="#" id="contact" class="button">contact</a>
<div class="panel home"><h3>Home</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada lacinia orci quis commodo. Morbi vulputate nibh lectus, et rhoncus libero vulputate at.</p></div>
<div class="panel about"><h3>About</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada lacinia orci quis commodo. Morbi vulputate nibh lectus, et rhoncus libero vulputate at. Curabitur vitae nisl elit. Pellentesque porta bibendum purus, ut rutrum dui pulvinar sed. Cras quis mattis quam. </p></div>
<div class="panel contact"><h3>Contact</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada lacinia orci quis commodo. Morbi vulputate nibh lectus, et rhoncus libero vulputate at. Curabitur vitae nisl elit. Pellentesque porta bibendum purus, ut rutrum dui pulvinar sed. Cras quis mattis quam. Quisque mattis nunc non nisi iaculis sollicitudin. Etiam in euismod velit. Donec ante lacus, iaculis eu elementum a, scelerisque in nunc. Phasellus gravida nisl imperdiet enim maximus fermentum. In at pharetra tellus, sed ultrices leo. </p></div>

CSS

.button{
    display:block;
    padding:14px;
    text-align:center;
    background:#000;
    color:#fff;
    display:inline-block;
    width:120px;
}
.button:hover{
    background:#f7f7f7;
    color:#000;
}
.panel{
    display:none;
    width:850px;
    margin:0 auto;
    background:#f7f7f7;
    color:#000;
    padding:25px
}
.hide{
    display:none;
}
.show{
    display:block;
}

JavaScript

$('.panel').addClass('hide');
$('.button').click(function(event){
    var btn = this.id;
    event.stopPropagation();
   	$('.panel.' + btn).removeClass('hide').addClass('show');
    if (!$('.panel').hasClass('show')){
     	$('.panel').removeClass('show').addClass('hide');   
     } 
    console.log('click');
    $(this).unbind('mouseout mouseleave');
    event.preventDefault();
    return false;
});
$('.button').hover(function(){
    var loc = $(this).attr('id');
    console.log('mouse over');
    if ($('.panel').hasClass('show')){
     	$('.panel').removeClass('show').addClass('hide');   
     } 
    $('.panel.' + loc).removeClass('hide').addClass('show'); 
},function(){
    var loc = $(this).attr('id');
    console.log('mouse out');
    $('.panel.'+ loc).removeClass('show').addClass('hide');
    
});