JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
<ul>
 <li>ITEM 1</li>
 <li>ITEM 2</li>
 <li>ITEM 3</li>	
</ul>
</div>

<div class="item_modal">
<center>
  <h1> ITEM 1 </h1> <h1 class="modal_btn_fechar"> X </h1>

  <p>Todos as descrições das pessoas são sobre a humanidade do atendimento, a pessoa pega no pulso, examina, olha com carinho. Então eu acho que vai ter outra coisa, que os médicos cubanos trouxeram pro brasil, um alto grau de humanidade.<br><br>

	Eu dou dinheiro pra minha filha. Eu dou dinheiro pra ela viajar, então é... é... Já vivi muito sem dinheiro, já vivi muito com dinheiro. -Jornalista: Coloca esse dinheiro na poupança que a senhora ganha R$10 mil por mês. -Dilma: O que que é R$10 mil?<br><br>

	A população ela precisa da Zona Franca de Manaus, porque na Zona franca de Manaus, não é uma zona de exportação, é uma zona para o Brasil. Portanto ela tem um objetivo, ela evita o desmatamento, que é altamente lucravito. Derrubar arvores da natureza é muito lucrativo!<br><br>

    Ai você fala o seguinte: "- Mas vocês acabaram isso?" Vou te falar: -"Não, está em andamento!" Tem obras que "vai" durar pra depois de 2010. Agora, por isso, nós já não desenhamos, não começamos a fazer projeto do que nós "podêmo fazê"? 11, 12, 13, 14... Por que é que<br><br> não?

	No meu xinélo da humildade eu gostaria muito de ver o Neymar e o Ganso. Por que eu acho que.... 11 entre 10 brasileiros gostariam. Você veja, eu já vi, parei de ver. Voltei a ver, e acho que o Neymar e o Ganso têm essa capacidade de fazer a gente olhar.<br><br>

	A única área que eu acho, que vai exigir muita atenção nossa, e aí eu já aventei a hipótese de até criar um ministério. É na área de... Na área... Eu diria assim, como uma espécie de analogia com o que acontece na área agrícola.<br><br>

	Se hoje é o dia das crianças... Ontem eu disse: o dia da criança é o dia da mãe, dos pais, das professoras, mas também é o dia dos animais, sempre que você olha uma criança, há sempre uma figura oculta, que é um cachorro atrás. O que...

CSS

html, body{
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 background-color: red;
}

.menu{
 position: absolute;
}

.item_modal{
 position: fixed;
 width: 100%;
 height: 100%;
 background: black;
 color: white;
 transform: translateY(-100%);
 transition: transform 0.4s ease-in-out;
}

.open{
 z-index: 999;
 transform: translateY(0%);
 transition: transform 0.4s ease-in-out;
}

JavaScript

$(document).ready(function(){
  $('.menu li').click(function(){
    $('.item_modal:nth-of-type(' + ($('.menu li').index(this) + 2) + ')').addClass("open");
 });

 $('.modal_btn_fechar').click(function(){
   $('.item_modal').removeClass('open');
  });
});