JSFiddle - React, Tailwind, and code Playground

HTML

<a class="show" href="#">show</a>

<a class="show2" href="#">show2</a>

<div class="one"></div>
<div class="two"></div>

CSS

div {
   margin:10px;
    display:none;
    opacity: 0;
    width: 100px;
    height: 100px;
    background: #366D93;
    -webkit-transition: opacity .8s ease-in-out;
       -moz-transition: opacity .8s ease-in-out;
        -ms-transition: opacity .8s ease-in-out;
         -o-transition: opacity .8s ease-in-out;
            transition: opacity .8s ease-in-out;
}

JavaScript

$('a.show').click(function(){
    $('.one').show(function(){
        $(this).css({opacity:1});   
    });
});

$('a.show2').click(function(){
    $('.two').show();        
    
    setTimeout(function(){
        $('.two').css({opacity:1});
    },0);
});