JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs2">
<input type="radio" name="tabs-btn" id="tabs-btn-1" value="" checked="">
<label for="tabs-btn-1">Pagine del sito</label>
<input type="radio" name="tabs-btn" id="tabs-btn-2" value="">
<label for="tabs-btn-2">Prodotto</label>
<input type="radio" name="tabs-btn" id="tabs-btn-3" value="">
<label for="tabs-btn-3">Caricamento di .po file</label>
 </div>
  
  <div id="tabcontent-1">
  Content New 1...
</div>
 <div id="tabcontent-2">
  Content New 2...
</div>
 <div id="tabcontent-3">
  Content New 3...
</div>

CSS

.tabs2 {
font-size: 0;
width: 70%;

/* text-align: center; */
margin: 0 15%;
}


.tabs2>input[type="radio"] {
display: none;
}


.tabs2~div {
/* hide content */
display: none;
border: 1px solid #e0e0e0;
padding: 10px 15px;
font-size: 16px;
}



/* show content (input type="radio") */
#tabs-btn-1:checked~#tabcontent-1,
#tabs-btn-2:checked~#tabcontent-2,
#tabs-btn-3:checked~#tabcontent-3 {
display: inline-block;
font-size: 16px;
}



.tabs2>label {
display: block;
text-align: left;
vertical-align: middle;
user-select: none;
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
padding: 2px 8px;
font-size: 16px;
line-height: 1.5;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
cursor: pointer;
position: relative;
top: 1px;
width: 200px;
}

.tabs>label:not(:first-of-type) {
border-left: none;
}

.tabs2>label:not(:first-of-type) {
border-left: none;
}


.tabs2>input[type="radio"]:checked+label {
background-color: #fff;
border-bottom: 1px solid #fff;
}