JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Butons">
    <div id="Home" class="button">Home</div>
    <div id="ContactUs" class="button">Contact Us</div>
    <div id="FAQs" class="button">FAQs</div>
</div>
<div id="Contents">
    <div id="HomeContent" class="content">Hope page goes here</div>
    <div id="ContactUsContent" class="content">Contact details goes here</div>
    <div id="FAQsContent" class="content">Frequently asked questions goes here</div>
</div>

CSS

.button {
    width: 100px;
    height: 50px;
    background: #BBFA55;
    line-height: 50px;
    text-align: center;
    margin-bottom: 3px;
    border: 1px solid #3B5C06;
}

.button:hover {
    cursor: pointer;
    color: red;
}

.button.selected {
    background: #7DC40A;
}

#Contents {
    position: absolute;
    top: 10px;
    left: 150px;
    width: 250px;
    height: 300px;
    border: 1px solid black;
}

.content {
    display: none;
    padding: 10px 20px;
    height: 280px;
}

#HomeContent {
    background: #FCDA3F;
}

#ContactUsContent{
    background: #4AC0FF;
}

#FAQsContent{
    background: #FF7070;
}

JavaScript

var selected_button_id = "Home";

$(function() {
    $(".button").click(function() {
        hide(selected_button_id);
        show(this.id);
    });
    
    show(selected_button_id);
});

function show(button_id) {   
    $("#" + button_id).addClass("selected");
    $("#" + button_id + "Content").show(1000);
    selected_button_id = button_id;
}
    
function hide(button_id) {
    $("#" + button_id).removeClass("selected");
    $("#" + button_id + "Content").hide(1000);
}