JSFiddle - React, Tailwind, and code Playground

HTML

<div class="title"></div>
<div class="titulos">
		<ul>
			<li>Um - Novo título</li>
			<li>Dois - Novo título 2</li>
			<li>Três - Novo título 3</li>
			<li>Quatro - Novo título 4</li>
			<li>Cinco - Novo título 5</li>
		</ul>
	</div>

CSS

.titulos>ul,li {
	list-style: none;
}

.titulos ul li {
	display: block;
	width: 200px;
	height: 30px;
	background: green;
	color: #fff;
	border-collapse: collapse;
	margin-bottom: 10px;
	text-align: center;
	line-height: 30px;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
}

.titulos ul li:hover{
	color: #E3C74D;
}
.title{
    display: block;
	width: 100%;
	height: 30px;
	background: green;
	color: #fff;
    line-height: 30px;
}

JavaScript

$(document).ready(function(){
	var titulos = $('.titulos>ul>li');
	
	titulos.click(function(){
	  var novo = $(this).text();
       //Para setar o título da página 
	  //$(document).attr("title", novo);
        
      /*Para fins de estudo e teste aqui no JSFiddle 
      considere a tarja verde como se fosse o título da página*/
      $('.title').text(novo);  
        
	});
});