JSFiddle - React, Tailwind, and code Playground

HTML

<p id="slid"> <a href="#slid3">3º Passo</a>
 <a href="#slid2">2º Passo</a>
 <a href="#slid1" class="slidselected">1º Passo</a> 
</p>
<ul id="slidcontents">
    <!-- tab 1 -->
    <li id="slid1" class="mostrar">Conteúdo que aparece ao clicar no link 1º passo</li>
    <li id="slid2">Conteúdo que aparece ao clicar no link 2º passo</li>
    <li id="slid3">Conteúdo que aparece ao clicar no link 3º passo</li>
</ul>

CSS

#slidcontents li {
    display: none;
}
.mostrar {
    display: block !important;
}

JavaScript

$(document).ready(function () {
    var galeria, i = 0;
    var links = $('#slid a').get().reverse();
    var slides = $('#slidcontents li');
    $(links).on('click', function (e) {
        e.preventDefault();
        slides.removeClass('mostrar');
        slides.eq(links.indexOf(this)).addClass('mostrar');
        if (e.which) clearInterval(galeria);
    });
    galeria = setInterval(function () {
        i++;
        $(links).eq(i).click();
        if (i == links.length) i = 0;
    }, 1000);
});