JSFiddle - React, Tailwind, and code Playground

HTML

<p><a href="#pop">pop</a></p>

<div id="pop"></div>

CSS

#pop
{
    width:  200px;
    height: 200px;
    background-color: red;
    
    display: none;
    opacity: 0;
    
    -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
        -ms-transition: opacity 1s;
         -o-transition: opacity 1s;
            transition: opacity 1s;
}

#pop.show {
    display:block;
}

#pop.active
{
    opacity: 1;
    background:red; /* bizarrement, il faut refournir la couleur de fond pour que ça marche */
}

JavaScript

jQuery('a').on('click', function(e){
    e.preventDefault();
    var $this = jQuery(jQuery(this).attr('href'));
    $this.toggleClass('show'); // o affecte d'abord le display block avant d'ajouter la classe
    setTimeout(function() { 
        $this.toggleClass('active'); // on ajoute la classe active 1ms avant que l'affichage de type block soit effectif
    }, 10);
});