JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<div class="plan-card-basic cards-flex">
  <div class="plan-card-icons">
     <div class="icon-visual active" id="icon-financeiro" data-target="#financeiro-content"> 
        <i class="fas fa-dollar-sign"></i>
     </div>
     <div class="icon-visual" id="icon-mensalidade" data-target="#mensalidade-content">
        <i class="fas fa-money-bill-wave"></i>
     </div>
  </div>
</div>

<div class="plan-card-text">
   <div class="financeiro conteudo active" id="#financeiro-content">                            
      <h2>Financeiro</h2>
      <p>Texto para Financeiro.</p>
   </div>
   <div class="mensalidade conteudo" id="#mensalidade-content">
      <h2>Mensalidade</h2>
      <p>Textos para Mensalidade.</p>
   </div>
</div>

CSS

.icon-visual {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  display: inline-block;
  color: #000;
  cursor: pointer;
}

.icon-visual:hover, .icon-visual.active {
  background-color: purple;
  color: #fff;
}

.conteudo {
  display: none;
}

.conteudo.active {
  display: block;
}

JavaScript

var icons = document.querySelectorAll('.icon-visual');
var contents = document.querySelectorAll('.conteudo');
for (var i = 0; i < icons.length; i++) {
  icons[i].onclick = iconClick; 
}

function iconClick() {     
	var icon = this;
  for (var i = 0; i < icons.length; i++) {
     icons[i].classList.remove('active');
  }
  for (var i = 0; i < contents.length; i++) {
     contents[i].classList.remove('active');
  }
  
  var idContent = icon.dataset.target;
  var content = document.getElementById(idContent);
  content.classList.add('active');
  icon.classList.add('active');
}