JSFiddle - React, Tailwind, and code Playground

HTML

<div id="banners">
<img id="banner1" src="banner.png" class="ativo">
<img id="banner2" src="banner2.png" class="block">
<img id="banner3" src="banner3.png" class="block">

<div id="banner_descricao1" class="banner_descricao_ativo">
<span id="banner_descricao_titulo">aLOREM IPSUM DOLOR LOREM IPSUM</span>
<span id="banner_descricao_texto">LOREM IPSUM DOLOR LOREM IPSUM LOREM IPSUM DOLOR LOREM IPSUM</span>
<div id="botoes">
<div class="botao1"></div>
<div class="botao2"></div>
<div class="botao3"></div>
</div>
</div>
    
    <div id="banner_descricao2" class="banner_descricao_block">
<span id="banner_descricao_titulo">LOREM IPSUM DOLOR LOREM IPS 2</span>
<span id="banner_descricao_texto">LOREM IPSUM DOLOR LOREM IPSUM LOREM IPSUM DOLOR LOREM IPSUM</span>
<div id="botoes">
<div class="botao1"></div>
<div class="botao2"></div>
<div class="botao3"></div>
</div>
</div>

    
</div>

CSS

.ativo {
display: inline;
}

.block {
display: none;
 pointer;
}
.banner_descricao_ativo {
display: inline;
}

.banner_descricao_block {
display: none;
}

.botao1 {
width: 10px;
float: left;
height: 10px;
background-color: #333333;
cursor: pointer;
}

.botao2 {
margin-left: 10px;
width: 10px;
float: left;
height: 10px;
background-color: #333333;
cursor: pointer;
}

JavaScript

$(".botao1").click(function() {
$('.ativo').removeClass('ativo').addClass('block').find($("#banner1")).addClass('ativo').removeClass('block');
});

$(".botao2").click(function() {
$('.ativo').removeClass('ativo').addClass('block').closest($("#banner2")).addClass('ativo').removeClass('block');
});