JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div1 up"></div>
<div class="PopUp Show"><div class="PopUpExit up"></div></div>

CSS

.div1 {
    Height: 150px;
    width: 150px;
    z-index: 3;
    position: absolute;
    background-color: #000;
}

.PopUp {
    height: 200px;
    width: 200px;
    z-index: 2;
    opacity: 0;
    background-color: #985CFA;
    position: absolute;
}

.PopUpExit {
    height: 20px;
    width: 20px;
    z-index: 5;
    right: 0;
    position: absolute;
    background-color: #5FEA02
}

JavaScript

$(document).ready(function(){
    $('.up').click(function(){
    var Show = $('.Show');
        
    if (Show.hasClass('visible')){
        $('.PopUp').animate({"opacity":"0"}, "fast");
		$('.PopUp').animate({"z-index":"2"}, "fast");
	} else {
        $('.PopUp').animate({"opacity":"1"}, "fast");
		$('.PopUp').animate({"z-index":"5"}, "fast");
    }
    });
});