JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="content">
        <ul id="menu">
            <li>
                <div class="accordeon">
                <h2>Contenu 1</h2> <span></span>
                </div>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum labore quos in mollitia praesentium, recusandae alias voluptatibus ratione dolorum laudantium maiores! Atque eligendi velit libero veniam ut dolor ullam at obcaecati ipsa labore. Magnam voluptatum excepturi et corporis, nobis fuga enim sint repellendus! Maxime fugit tenetur, error reiciendis sit dolorum ullam alias aperiam debitis ipsa, qui quas at, consequatur quos sapiente odio nobis rerum. Quae, dolores ut! Quibusdam blanditiis odit quod quidem maxime commodi libero quis dicta ratione, reiciendis maiores ullam fugit laborum! Eveniet tenetur, fugit dicta aspernatur harum maxime nulla laudantium asperiores unde, consequatur excepturi!</p>
            </li>
                
            <li>
                <div class="accordeon">
                <h2>Contenu 2</h2> <span></span>
                </div>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum labore quos in mollitia praesentium, recusandae alias voluptatibus ratione dolorum laudantium maiores! Atque eligendi velit libero veniam ut dolor ullam at obcaecati ipsa labore. Magnam voluptatum excepturi et corporis, nobis fuga enim sint repellendus! Maxime fugit tenetur, error reiciendis sit dolorum ullam alias aperiam debitis ipsa, qui quas at, consequatur quos sapiente odio nobis rerum. Quae, dolores ut! Quibusdam blanditiis odit quod quidem maxime commodi libero quis dicta ratione, reiciendis maiores ullam fugit laborum! Eveniet tenetur, fugit dicta aspernatur harum maxime nulla laudantium asperiores unde, consequatur excepturi!</p>
            </li>  

            <li>
                <div class="accordeon">
                <h2>Contenu 1</h2> <span></span>
                </div>
                <p>Lorem ipsum, dolor...

CSS

*{ 
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #f1f1f1;
}
#content{
    display :flex;
    align-items: flex-start;
    justify-content: center;
    max-width: 2000px;
    padding: 20px;
}
#menu{
    width: 600px;
}
#menu li{
    width: 100%;
    border-bottom: 2px solid blueviolet;
    padding: 10px 0;
    list-style: none;
}
.accordeon{
    padding: 5px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
} 
#menu li h2{
    font:italic bold 20px "times new roman", serif;
}
#menu li p{
    font: 11px "calibri", sans-serif;
    padding: 0 6px;
    display: none;
}
#menu li span:after{
    content: '+';
    font-size: 1.5em;
    position: relative;
}
#menu li.active span:after {
    content: '-';
}

/*Popup*/

#containerPop{
    display :flex;
    justify-content:center;
    align-items: center;
    max-width: 2000px;
    height: 220px;  
    position: relative; 
    display: none;
     
} 
#contenuPop{
	position:absolute; 
  bottom: 60%;
	width:20%;
	background:gray;
	height:inherit;
	border-radius:5%;
	padding:0.5em;
	box-shadow:2px 2px 10px black;
	background:linear-gradient(to right bottom,gray, indigo);
	color:white;
	font-weight:bold;
}
#containerPop span{
	position:absolute;
	right:37%;
  bottom:150%;
	display:block;
	width:20px;
	text-align:center;
	border:1px solid indigo;
	cursor:pointer;
	border-radius:30%;
    font-weight: 700;
}
button{
	display:block;
	background:indigo;
	color:white;
	font-weight:bold;
	border-radius:10%;
	border:none;
	cursor:pointer;
	margin-left:28%;
    width: 6%;
}

JavaScript

/*MENU ACCORDEON*/
$(document).ready(function () {
  $("#menu > li").on("click", function () {
    var active = $(this);
    $("#menu li").not(active).find("p").slideUp();
    $("#menu li").not(active).removeClass("active");
    active.toggleClass("active");
    active.find("p").slideToggle();
  });
});

/*POPUP*/

/* CLIC SUR BOUTON*/
$("button").click(function () {
  //opacité
  var opac = $("#content").css("opacity");
  if (opac == "1") {
    $("#content").css("opacity", "0.33");
  } else {
    $("#content").css("opacity", "1");
  }
  //ouverture-fermeture popup
  $("#containerPop").slideToggle();
});

/* CLIC SUR LA CROIX */
$("#containerPop span").click(function () {
  $("#content").css("opacity", "1");
  $("#containerPop").slideUp();
});