JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab">
<button class="tablink" onclick="openSvc(event,'dev')"> Desenvolvimento de software </button> 
<button class="tablink active" onclick="openSvc(event,'it')"> Infraestruturas IT </button> 
<button class="tablink" onclick="openSvc(event,'design')"> UX / UI Design </button> 
<button class="tablink" onclick="openSvc(event,'consult')"> Consultoria </button> 
</div>

<div id="dev" class="svc display-yes">
  <p>lorem ipsum1
  
</div>

<div id="it" class="svc">
  <p>lorem ipsum2
</div>
<div id="design" class="svc">
  <p>lorem ipsum3
  
</div>

<div id="consult" class="svc">
  <p>lorem ipsum4
  
</div>

CSS

.svc{
  opacity:0;
  position:absolute;
  transition:.3s;
}
.display-yes{
  opacity:1;
  position:relative;
}

.tablink{
  background-color:blue;
}

.active{
background-color:red;  
}

JavaScript

function openSvc(evt, svc) {
       var i, x, tablinks, opacitys;
       x = document.getElementsByClassName("svc");
       for (i = 0; i < x.length; i++) {
           x[i].classList.remove('display-yes');
       }
       tablinks = document.getElementsByClassName("tablink");
       for (i = 0; i < x.length; i++) {
           tablinks[i].className = tablinks[i].className.replace(" active", "");
       }       document.getElementById(svc).classList.add('display-yes');
       evt.currentTarget.className += " active";
   }