JSFiddle - React, Tailwind, and code Playground

HTML

<p class="nav">
  <a id="10" class="active" href="#">Home</a>
  <a id="2" href="#">Our Designs</a>
  <a id="3" href="#">Our Team</a>
  <a id="4" href="#">Contact</a>
</p>
<div id="p10" class="pactive">10
</div>
<div id="p2">2
</div>
<div id="p3">3
</div>
<div id="p4">4
</div>

CSS

#p10, #p2, #p3, #p4 {
    display:none;
}

JavaScript

$(".nav").children("a").click(function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(".pactive").fadeOut(10, function () {
        $(this).removeClass("pactive");
    });
    $("#p" + this.id).fadeIn(10, function () {
        $(this).addClass("pactive");
    });
});