JSFiddle - React, Tailwind, and code Playground

by AnthraxisBR

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<section class="central">
   <nav>
      <ul>
          <li><a class="icon-entrega"><span class="icon ic entrega topic"><p>Entregas</p></span></a></li>
          <li><a class="icon-gift"><span class="icon ic icon-gift topic"><p>Compras</p></span></a></li>
          <li><a class="icon-prod-flor"><span class="icon ic prod-flor topic"><p>Produtos</p></span></a></li>
          <li> <a class="icon-lock"><span class="icon ic lock topic"><p>Segurança</p></span></a></li>
      </ul>
   </nav>
</section>

<section class="blc-ca">
   <div class="conteudo1 div-hidden"></div>
   <div class="conteudo2 div-hidden"></div>
   <div class="conteudo3 div-hidden"></div>
   <div class="conteudo4 div-hidden"></div>
</section>

CSS

section.blc-ca .div-hidden {
display:none;
}

.entrega.topic.exibir .conteudo1 {
display: block;
}

.icon-gift.topic.exibir .conteudo2 {
display: block;
}

.prod-flor.topic.exibir .conteudo3 {
display: block;
}

.lock.topic.exibir .conteudo4 {
display: block;
}

JavaScript

$(document).on('click','.topic',function(){
    $('.topic').removeClass('exibir');
    $('.')
    $(this).addClass('exibir');
});