JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
<a href="#" id="project-1-link">One</a> <a href="#" id="project-2-link">Two</a> <a href="#" id="project-3-link">Three</a> <a href="#" id="project-4-link">Four</a>
</div>

<div id="project-1-details">
<a class="close">x</a>
<strong>One.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>

<div id="project-2-details">
<a class="close">x</a>
<strong>Two.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>

<div id="project-3-details">
<a class="close">x</a>
<strong>Three.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>

<div id="project-4-details">
<a class="close">x</a>
<strong>Four.</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>

CSS

div.nav{
    margin:20px 0;
}

#project-1-details, #project-2-details, #project-3-details, #project-4-details{
    display:none;
    background-color:black;
    color:white;
    padding:40px;
}
a.close{
    cursor:pointer;
    background:white;
    color:black;
    padding:10px;
    position:relative;
    top:-30px;
    left:-40px;
}

JavaScript

$(document).ready(function(){

    $("a#project-1-link").click(function(){
      $("div#project-2-details, div#project-3-details, div#project-4-details").fadeOut("",function(){
          $("div#project-1-details").fadeIn(""); 
      });  
    });
    
    $("a#project-2-link").click(function(){
      $("div#project-1-details, div#project-3-details, div#project-4-details").fadeOut("",function(){
          $("div#project-2-details").fadeIn(""); 
      });  
    });
    
    $("a#project-3-link").click(function(){
      $("div#project-1-details, div#project-2-details, div#project-4-details").fadeOut("",function(){
          $("div#project-3-details").fadeIn(""); 
      });  
    });
    
    $("a#project-4-link").click(function(){
      $("div#project-1-details, div#project-2-details, div#project-3-details").fadeOut("",function(){
          $("div#project-4-details").fadeIn(""); 
      });  
    });
   
    
    $("a.close").click(function(){ 
        $("div#project-1-details").fadeOut("");
        $("div#project-2-details").fadeOut("");
        $("div#project-3-details").fadeOut("");
        $("div#project-4-details").fadeOut("");
      });

});