JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navegacao">
    <a href="#section1" id="link1" class="nav">Primeira secção</a>
    <a href="#section2" id="link2" class="nav" >Segunda secção</a>
    <a href="#section3" id="link3" class="nav">Terceira secção</a>
</div>

<div class="wrapper">
<section id="section1" class="grandeArea"></section>
<section id="section2" class="grandeArea">
    <div class="example exposto">Conteúdo aqui</div>
</section>
<section id="section3" class="grandeArea">
    <textarea class="exposto">Conteúdo aqui</textarea>
</section>
<div id="overlay"></div>
</div>

CSS

.grandeArea {
    height: 100vh;
    position:relative;
}
.navegacao {
  padding: 8px;
  background-color: #fff;
  border: 3px solid #000;
}
.nav {
  padding: 0 12px;
  border-right: 1px solid #000;
}
#section1 {background-color: cadetblue;}
#section2 {background-color: burlywood;}
#section3 {background-color: yellowgreen;}
.wrapper {
  position: relative;
}
.example {     
    background:#fff;
    border:1px solid #ccc;
    cursor:pointer;
    float:left;
    margin:5px; padding:20px;
    width:100px; height:100px;
}
.expose {
    position:relative;
}

#overlay {
    background:rgba(0,0,0,0.3);
    display:none;
    width:100%; height:100%;
    position:absolute; top:0; left:0; z-index:99998;
}

JavaScript

// Primeira secção
$('#link1').click(function(e){
    $('#section1').css('z-index','99999');
    $('#overlay').fadeIn(300);
});

$('#overlay').click(function(e){
    $('#overlay').fadeOut(300, function(){
        $('#section1').css('z-index','1');
    });
});



// Segunda secção
$('#link2').click(function(e){
    $('#section2').css('z-index','99999');
    $('#overlay').fadeIn(300);
});

$('#overlay').click(function(e){
    $('#overlay').fadeOut(300, function(){
        $('#section2').css('z-index','1');
    });
});



// Terceira secção
$('#link3').click(function(e){
    $('#section3').css('z-index','99999');
    $('#overlay').fadeIn(300);
});

$('#overlay').click(function(e){
    $('#overlay').fadeOut(300, function(){
        $('#section3').css('z-index','1');
    });
});