JSFiddle - React, Tailwind, and code Playground

HTML

<dd class="accordion-navigation">
  <a href="#panel1a" class="tab-table" role="tab" aria-controls="panel1a" id="first-tab-accordion">Subastas Activas
    <i class="fa fa-chevron-down styled-tab-icon arrow-content-hidden" id="arrow-content-hidden-first">A</i>
    <i class="fa fa-chevron-up styled-tab-icon arrow-content-shown" id="arrow-content-shown-first">B</i>
  </a>
    
    
  // More stuff...
</dd>

CSS

.arrow-content-hidden {
 }

.arrow-content-shown {
  display: none;
}

JavaScript

function toggle() {
  var arrowTabDown = document.getElementById("arrow-content-hidden-first");
  var arrowTabUp = document.getElementById("arrow-content-shown-first");
    
  if (arrowTabDown.style.display == 'none') {
    arrowTabDown.style.display = 'block';
    arrowTabUp.style.display = 'none';
  } else {
    arrowTabDown.style.display = 'none';
    arrowTabUp.style.display = 'block';
  }
};
document.getElementById("first-tab-accordion").style.color = 'black';
document.getElementById("first-tab-accordion").addEventListener("click", toggle, false);