JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

    <title>Demo</title>
    
</head>
<body>

<div id="links">
    <a class="link current"href="#">11</a>
    <a class="link" href="#">12</a>
    <a class="link" href="#">33</a>
</div>

<div id="content">
    <p class="content active">Content 1</p>
    <p class="content">Content 2</p>
    <p class="content">Content 3</p>
</div>

</body>
</html>

CSS

.link{
    color:#000;
}
.link.current{
    color:#00f;
}
.content{
    display:none;
}
.content.active{
    display:block;
}

JavaScript

$(".link").click(function(event) {
  
    event.preventDefault();                        //Prevent default action of clicking a link
    var index = $(this).index();                   //Store the index of the link you clicked
    
    $(".link").removeClass("current");             //Remove current class from all links
    $(this).addClass("current");                   //Add current class to the link you clicked on
    $(".content").removeClass("active");           //Remove active content
    $(".content").eq(index).addClass("active");    //Set corresponding content to active
});