JSFiddle - React, Tailwind, and code Playground

HTML

<div class="checkbox_wrapper">
    <input type="checkbox" id="chk_btn" />
</div>

<div id="wrap">

    <ul class="tabpan">
        <li class="tab" id="tab_1">One</li>
        <li class="tab" id="tab_2">Two</li>
        <li class="tab" id="tab_3">Three</li>
    </ul>
   </div>
    
    <div class="clear"></div>
    
    <div>
        <div class="tabbox tabbox_1">tab 1 content</div>
        <div class="tabbox tabbox_2">tab 2 content</div>
        <div class="tabbox tabbox_3">tab 3 content</div>
    </div>

CSS

#wrap{
    width:1000px;
    height:100px;
    background:blue;
}
.tabbox {
    display:none
}
.clear {
    clear:both
}
.tabpan li {
    float:left;    
    background:#ddd;
    color:#fff;
    font-weight:bold;
    border:1px solid #ddd;
    list-style-type:none;
    margin:0 auto;
    padding:10px 130px;
    text-align:center;
    
}
.tabpan .active {
    background:#fff;
    color:#ddd;
    border:1px solid #ddd
}
.checkbox_wrapper {
    position: relative;
    width:45px;
    height:101px;
    margin:10px auto;
}
.checkbox_wrapper input[type="checkbox"] {
    opacity:0;
    width:45px;
    height:101px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.checkbox_wrapper input[type="checkbox"] + label {
    background:url('../imgs/off.png') no-repeat;
    width:45px;
    height:101px;
    display:inline-block;
    padding: 0 0 0 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.checkbox_wrapper input[type="checkbox"]:checked + label {
    background:url('../imgs/onn.png') no-repeat;
    width:45px;
    height:101px;
    display:inline-block;
    padding: 0 0 0 0px;
}
.checkbox_wrapper {
    float:left;
    margin:4px;
}

JavaScript

$(function () {
    $('.tabbox_1').show();
    $('.tab').click(function () {
        var tabid = $(this).attr('id').replace('tab_', '');
        $('.tab').removeClass('active');
        $(this).addClass('active');
        if (!$('.tabbox_' + tabid).is(':visible')) {
            $('.tabbox').hide();
        }
        $('.tabbox_' + tabid).fadeIn();

    });

});