JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <header>
        <nav>
            <ul>
                <li>Vermelho</li>
                <li>Amarelo</li>
                <li>Verde</li>
            </ul>   
        </nav>   
    </header>
    
    <article>
        <section>
        
        </section>   
    </article>    
    
</div>

CSS

*{margin: 0; padding: 0;}
html,body{height: 100%; width: 100%;overflow: hidden; }

.main{  
    width: 100%;
    height: 100%;
    background: rgba(15,85,130,0.5);
    
}

.main>header{
    width: 100%;
    height: 50px;
    background: rgba(0,0,0,0.5);
    margin-left: 10px;
}

header>nav>ul{
    list-style: none;
}

header>nav>ul>li{
    width: 200px;
    height: 50px;
    margin-right: 10px;
    display: inline-block;
}

header>nav>ul li:nth-child(1) {  
  background: red;
}

header>nav>ul li:nth-child(2) {  
  background: yellow;
}

header>nav>ul li:nth-child(3) {  
  background: green;
}

.main>article{
    position: relative;
    width: 100%;
    height: 100%; 
    
    padding: 10px 10px 10px;
}
article>section{
    width: 100%;
    height: 100%;
    background: rgba(0,4,55,0.3);
}

JavaScript

$(document).ready(function(){
    $('nav>ul').find('li').click(function(){
       var linkColor = $(this).css("background-color");
        $('article>section').css({background: linkColor}); 
    });
});