JSFiddle - React, Tailwind, and code Playground

HTML

<div class="divider">
  <input id="link01" class="linkinp form-check-input" name="link" type="checkbox">
  <label for="link01" class="link">Вкладка 1</label>
</div><br>

<div class="divider">
  <input id="link02" class="linkinp form-check-input" name="link" type="checkbox">
  <label for="link02" class="link">Вкладка 2</label>
</div><br>
<div class="divider">
  <input id="link03" class="linkinp form-check-input" name="link" type="checkbox">
  <label for="link03" class="link">Вкладка 3</label>
</div><br>

<div id="tab1" class="tab2" style="display: none;">Контент вкладки 1</div>
<div id="tab2" class="tab2" style="display: none;">Контент вкладки 2</div>
<div id="tab3" class="tab2" style="display: none;">Контент вкладки 3</div>

CSS

label {display: block;}



.link {
  width: 100px; display: inline-block;
  text-align: center; padding: 3px 0;
  background-color: #ddd; user-select: none;
  border: 1px solid #333; cursor: pointer;
}
.tab {
  width: 400px; height: 50px; margin: 5px 24px;
  background-color: #666; color: #ddd;
}

JavaScript

jQuery(document).ready(function($) {
const checkbox2tabMap = {
  link01: 'tab1',
  link02: 'tab2',
  link03: 'tab3',
};
function onCheckboxChange(event) {
  const tab = document.getElementById(checkbox2tabMap[event.target.id]);
  if(!tab) { return; }
  tab.style.display = event.target.checked ? 'block' : 'none';
}
Object.keys(checkbox2tabMap).forEach((id) =>{
    let check = document.getElementById(id);
    if(check) check.addEventListener('change', onCheckboxChange)
});
});

jQuery(document).ready(function($) {
$( 'input' ).on( 'click', function()  {
  $( 'input' ).prop( 'checked', false )
  .silblings( 'label' ).hide();
  $( this ).prop( 'checked', true )
  .silblings( 'label' ).show();
})
});