JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="alternar-texto">
Ver texto 1</a>
  
<div class="texto">Texto 1...</div>
 
<a href="#" class="alternar-texto">
Ver texto 2</a>
  
<div class="texto">Texto 2...</div>

CSS

*{
    transition: .3s;
}

.slideDown{
    opacity: 1;
}

.slideUp{
    opacity: 0;
}

.show{
    display: auto;
}

.hide{
    display: none;
}

JavaScript

document.addEventListener("click", function(e){
    e.target.className == "alternar-texto" && (function($this){
        let $next = $this.nextElementSibling;
        if ($next.classList.contains("slideUp")){           
            $next.classList.remove("hide");
            $next.classList.add("show");            
            setTimeout(function(){
                $next.classList.remove("slideUp");
            		$next.classList.add("slideDown");
            }, 100);
        }
        else{
            $next.classList.remove("slideDown");
            $next.classList.remove("show");
            $next.classList.add("slideUp");
            setTimeout(function(){
            		$next.classList.add("hide");
            }, 300);
        }
    })(e.target);
}, false);