JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" name="tab" value="#pane0" />Show pane 0<br />
<input type="radio" name="tab" value="#pane1" />Show pane 1<br />
<input type="radio" name="tab" value="#pane2" />Show pane 2<br />
<br />
<div class="pane" id="pane0">Pane 0</div>
<div class="pane" id="pane1">Pane 1</div>
<div class="pane" id="pane2">Pane 2</div>

JavaScript

// The value of each radio button is the "id" of the corresponding
// pane (preceded by a "#"), so it can be used to get the pane
// to show.

// Notice how there is just one "change" handler for all the radio
// button, and the radio buttons do not need "id" attributes. More
// importantly, if you were to add a fourth tab and pane, you
// wouldn't have to add or modify the JavaScript. You can just add
// the elements.

$(function() {
    // Set the radio group to an initial value.
    $('input:radio[name=tab]:first').prop('checked', true);
    
    function updatePanes() {
        // Hide all panes. If you don't want to put class="pane"
        // on all the panes, this could be:
        //   $('[id^=pane]').hide();
        $('.pane').hide();
        
        // Show the pane that corresponds to the selected
        // radio button.
        $($('input[name=tab]:checked').val()).show();
    }
    
    // Update the panes whenever the radio selection is changed.
    $('input:radio[name=tab]').click(function() {
        updatePanes();
        console.log('11 ');
        
    });

    // Update the panes on page load.
    updatePanes();
});